PopupListMixin

Syncs the cursor a popup source and a list-like element inside the popup
Pet:
Canary
Cat
Chicken
Chinchilla
Cockatiel
Cricket
Dog
Ferret
Finch
Fish
Frog
Gerbil
Guinea Pig
Hamster
Hermit Crab
Lizard
Mouse
Parakeet
Parrot
Pig
Rabbit
Rat
Snail
Snake
Spider
Turtle
Demo: PopupListMixin syncs the item cursor of this AutoCompleteComboBox and its popup list

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 → setStaterender DOM → post-render

Expects the component to provide:

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)) {}