Top
ComboBox - Keyboard navigation
ComboBox
The <ComboBox /> is built to be keyboard friendly.
Keyboard navigation is enabled by default, via the enableNavigation prop.
Tags (when multiple=true) and list items can be navigated with arrow keys.
You can specify a tabIndex, just like for a regular <input /> (or HTMLElement) in order to modify the tab-navigation order for the <ComboBox />.
Here's a list of possible keyboard actions:
  • Arrow up/down opens list if it is not expanded.
  • Arrow up/down navigate items when list is expanded.
  • Enter selects the activeItem.
  • Escape collapses the dropdown list when it is expanded and defocuses the activeTag, if the dropdown list is collapsed.
  • Backspace deletes the activeTag. If there is a tag to the left, it will become active. Otherwise, the tag to the right will be made active (if any). When keepTagTextOnRemove=true, the tag is removed, but the label becomes a text which you can further edit.
  • Delete deletes the activeTag. If there is a tag to the right, it will become active. Otherwise, the tag to the left will be made active (if any).
  • Typing in a searchable <ComboBox /> when it is collapsed, will expand it.
  • When an activeItem is selected by pressing Enter, the next item will become active, if navigateToNextAfterSelection=true.
  • Arrow up/down navigation will set the new activeItem, by jumping over disabled items.
Keyboard navigation in tags can be disabled via enableTagNavigation.