CursorSelectMixin

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

Expects the component to provide:

• currentIndex state member, typically via ItemsCursorMixin.
• optional currentItem state member, also typically via ItemsCursorMixin.

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.