Class AbstractMultiSelectElement

An abstract base class designed to standardize the behavior for a multi-select UI component. Multi-select components return an array of values as part of form submission. Different implementations may provide different experiences around how inputs are presented to the user.

Hierarchy (view full)

Properties

_options _choices _internals _primaryInput tagName formAssociated

Accessors

form name value disabled editable

Methods

select unselect _getValue _setValue connectedCallback _applyInputAttributes _initialize _toggleDisabled _buildElements _refresh _activateListeners _onClick

Properties

Protected _options

_options: (HTMLOptGroupElement | HTMLOptionElement)[]

Predefined elements which were defined in the original HTML.

Protected _choices

_choices: Record<string, string> = {}

An object which maps option values to displayed labels.

Protected _internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

Protected _primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

Static tagName

tagName: string

The HTML tag name used by this element.

Static formAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

Accessors

form

  • get form(): HTMLFormElement

  • The form this element belongs to.

    Returns HTMLFormElement

name

  • get name(): string

  • The input element name.

    Returns string

value

disabled

  • get disabled(): boolean

  • Is this element disabled?

    Returns boolean

editable

  • get editable(): boolean

  • Is this field editable? The field can be neither disabled nor readonly.

    Returns boolean

Methods

select

  • select(value): void

  • Mark a choice as selected.

    Parameters

    • value: string

      The value to add to the chosen set

    Returns void

unselect

  • unselect(value): void

  • Mark a choice as un-selected.

    Parameters

    • value: string

      The value to delete from the chosen set

    Returns void

_getValue

_setValue

connectedCallback

_applyInputAttributes

  • _applyInputAttributes(input): void
  • Internal

    Apply key attributes on the containing custom HTML element to input elements contained within it.

    Parameters

    • input: any

    Returns void

Protected _initialize

  • _initialize(): void
  • Protected

    Preserve existing elements which are defined in the original HTML.

    Returns void

Protected _toggleDisabled

  • _toggleDisabled(disabled): void
  • Protected

    Special behaviors that the subclass should implement when toggling the disabled state of the input.

    Parameters

    • disabled: boolean

      The new disabled state

    Returns void

Protected _buildElements

  • _buildElements(): HTMLElement[]
  • Protected

    Create the HTML elements that should be included in this custom element. Elements are returned as an array of ordered children.

    Returns HTMLElement[]

Protected _refresh

Protected _activateListeners

Protected _onClick

  • _onClick(event): void
  • Protected

    Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.

    Parameters

    • event: PointerEvent

    Returns void

Settings

Member Visibility

Theme

On This Page

_options_choices_internals_primaryInputtagNameformAssociatedformnamevaluedisablededitableselectunselect_getValue_setValueconnectedCallback_applyInputAttributes_initialize_toggleDisabled_buildElements_refresh_activateListeners_onClick