[ @sdxc/ui/mixins ]
comboboxFilter
Adapts @remix-run/ui/combobox's input behavior onto a ComboBox's text input.
import { comboboxFilter } from "@sdxc/ui/mixins";Usage
Turns a ComboBox's text input into the as-you-type filter for its popup
option list by delegating typing, arrow-key movement, and blur/Escape
commit to @remix-run/ui/combobox's input() primitive.
Signature
comboboxFilter(): MixinDescriptor<HTMLInputElement>Examples
<combobox.Context name="airport">
<input mix={[inputStyle, comboboxFilter()]} placeholder="Search airports" />
<div mix={[popoverStyle, combobox.popover()]}>
<div mix={[listStyle, combobox.list()]}>
{airports.map((airport) => (
<div key={airport.value} mix={[optionStyle, combobox.option(airport)]}>{airport.label}</div>
))}
</div>
</div>
</combobox.Context>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
Event
ComboboxFilterChangeEvent
Dispatched on a ComboBox's input by comboboxFilter whenever the
filter text, active option, or open state moves, letting a consumer
react to live narrowing without reading @remix-run/ui/combobox's context.
new ComboboxFilterChangeEvent(init: { activeOptionId: string | null; filterText: string; isOpen: boolean })| Property | Type | Description |
|---|---|---|
activeOptionId | readonly string | null | Id of the option Enter would commit right now, or null when none is active. |
filterText | readonly string | Draft text the popup's options are currently narrowed by. |
isOpen | readonly boolean | true while the popup is open and showing the narrowed option list. |