SelectedValueAPIMixin

Exposes a public API for the value of a list-like element

Overview

Purpose: defines a value property that reflects the value attribute of a selected item.

This mixin is independent of the Elix Elix render pipeline.

Expects the component to provide:

  • selectedIndex state member indicating the index of the currently selected item. This is usually provided by SingleSelectAPIMixin.
  • items state member representing the items that can be selected. This is usually provided by ContentItemsMixin.

Provides the component with:

  • value property representing the value attribute of the currently-selected item.

Usage

import SelectedItemTextValueMixin from "elix/src/base/SelectedItemTextValueMixin.js";
class MyElement extends SelectedItemTextValueMixin(HTMLElement) {}

This mixin exists for list-like components that want to provide a more convenient way to get/set the selected item using value in the same manner as a native HTML select element. The mixin adds a value property that gets the value attribute of a component's currently-selected item. The value property can also be set to set the selection to the first item in the items collection that has the requested value attribute. If the indicated value is not found in items, the selection is cleared.

API

Used by classes DropdownList, FilterListBox, ListBox, OptionList, PlainDropdownList, PlainFilterListBox, PlainListBox, and PlainOptionList.

value property

The value attribute of the selected item.

Setting this to a string will attempt to select the first list item whose value attribute matches that string. Setting this to a string not matching any value attribute will result in no selection.

Type: string