Skip to main content

Combobox

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-ui-combobox

Combobox Store#

The 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 items
  • filteredItems – Filtered items
  • highlightedIndex – Highlighted index
  • floatingOptions – Overrides useFloating options
  • targetRange – Range from the trigger to the cursor
  • text – Text after the trigger

ComboboxStateById#

  • activeId – Combobox id
  • filter – Items filter function by text
  • maxSuggestions – Max number of items
  • trigger – Trigger that activates the combobox
  • onSelectItem – 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

Props#

  • ComboboxStateById – the combobox config
  • items – 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 is text)

Combobox Items#

Combobox items have the following interface:

export interface ComboboxItemData {
/**
* Unique key.
*/
key: string;
/**
* Item text.
*/
text: any;
/**
* Whether the item is disabled.
* @default false
*/
disabled?: boolean;
/**
* Data available to `onRenderItem`.
*/
data?: unknown;
}

Combobox plugin#

onChange:

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)

Source Code#

Edit this page