Combobox
#
Installation- npm
- Yarn
#
Combobox StoreThe combobox state is stored in a zustood store: comboboxStore
.
ComboboxState
#
activeId
โ Active id (combobox id which is opened)byId
โ Object whose keys are combobox ids and values are combobox config stores (e.g. one for tag, one for mention,...)items
โ Unfiltered itemsfilteredItems
โ Filtered itemshighlightedIndex
โ Highlighted indexfloatingOptions
โ OverridesuseFloating
optionstargetRange
โ Range from the trigger to the cursortext
โ Text after the trigger
ComboboxStateById
#
activeId
โ Combobox idfilter
โ Items filter function by textmaxSuggestions
โ Max number of itemstrigger
โ Trigger that activates the comboboxonSelectItem
โ Called when an item is selected
#
Combobox Component- can be rendered multiple times for each combobox configuration (
ComboboxStateById
) - singleton (only one combobox can be opened), its state is stored in
comboboxStore
#
PropsComboboxStateById
โ the combobox configitems
โ Set items to the combobox store. Alternative:comboboxActions.items(items)
.component
โ Render this component when the combobox is open (useful to inject hooks).onRenderItem
โ Render combobox item (default istext
)
#
Combobox ItemsCombobox items have the following interface:
#
Combobox pluginonChange
:
#
For each combobox state:- if the selection is collapsed
- if the cursor follows the trigger
- if there is text without whitespaces after the trigger
- open the combobox: set
id
,text
,targetRange
in the store
onKeyDown
#
If the combobox is open, handle:
- down (next item)
- up (previous item)
- escape (reset combobox)
- tab, enter (select item)