tuix-dropdown

tuix-dropdown wraps a tuix-input with a list of options. In single mode the field is read-only and clicking it opens the list; in search mode typing filters the options.

The list is set as a property. The attribute exists and parses JSON, so options='["Draft", "Sent"]' works for a short list of plain values, but anything longer belongs in the property:

const dropdown = document.querySelector('tuix-dropdown')
 
dropdown.options = [
    { name: 'Switzerland', value: 'CH' },
    { name: 'Germany', value: 'DE' },
]
dropdown.value = dropdown.options[0]
 
dropdown.addEventListener('select', (event) => console.log(event.detail.value)) // 'CH'

Types

Single

The default. The field cannot be typed in; the whole field is the trigger.

Options may be plain values, as here, in which case the label is the value.

Search

Typing filters the list, and blurring restores the label of the selected option.

Description states

The helper line is the input's, so the same five description states apply.

Option types

type TuixDropdownPlainOption = string | number | boolean
 
interface TuixDropdownObjectOption {
    name: string // shown in the list
    value: TuixDropdownPlainOption // reported by the select event
}
 
type TuixDropdownOption = TuixDropdownPlainOption | TuixDropdownObjectOption

Keyboard

Clicking anywhere outside the component also closes the list.

API

Properties

Events

The detail of select is the option's value, never the object. Typed as CustomEventTuixDropdownSelect and CustomEventTuixDropdownInput.

Notes

• Assigning a new options array clears the current selection; set value again afterwards if it should survive.
• The list is absolutely positioned inside the component, so the dropdown needs room below it, or the page has to scroll.