PopupListMixin

Overview

Purpose: Syncs the cursor a popup source and a list-like element inside the popup.

Example: in the AutoCompleteComboBox above, both the outer combo box and its interior ListBox maintain a currentIndex property. PopupListMixin keeps these indices in sync.

This mixin works in the middle of the Elix render pipeline:

events → methods → setState ➞ render DOM → post-render

Expects the component to provide:

• dragSelect state member, typically via PopupDragSelectMixin.

Provides the component with:

• logic to update the top-level component's item cursor when the cursor in the list changes, and vice versa.
• mouse hover behavior which updates the list cursor as the user moves the mouse over the list.

Usage

import PopupListMixin from "elix/src/base/PopupListMixin.js";
import PopupSource from "elix/src/base/PopupSource.js";
import PopupDragSelectMixin from "elix/src/base/PopupDragSelectMixin.js";
class MyElement extends PopupDragSelectMixin(PopupListMixin(PopupSource)) {}