CursorSelectMixin

Keeps the current item and selected item in sync

Overview

Purpose: Keeps the current item and selected item in sync.

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

events → methods → setState → render → update DOM

Expects the component to provide:

Provides the component with:

  • selectedIndex state member kept in sync with currentIndex.
  • selectedItem state member kept in sync with currentItem.

Usage

import CursorSelectMixin from "elix/src/base/CursorSelectMixin.js";
import ItemsCursorMixin from "elix/src/base/ItemsCursorMixin.js";
import SingleSelectionAPIMixin from "elix/src/base/SingleSelectionAPIMixin.js";

class MyElement extends CursorSelectMixin(
  ItemsCursorMixin(SingleSelectionAPIMixin(HTMLElement))
) {}

This mixin is designed to fit between ItemsCursorMixin and SingleSelectionAPIMixin in cases where a list-like element (e.g., ListBox) wants to publicly expose its current item as its selected item.