React Single Selection ComboBox
The React ComboBox
supports single-selection mode and quick filtering of the list of items via the main input prompt. Users can quickly type in the item they are looking for and be presented with a list of options. Upon pressing the enter key, the first highlighted match will be selected.
React Single Selection Example
To enable single-selection and quick filtering, set the singleSelect
property on the ComboBox
component. The user experience and keyboard navigation will mostly stay the same, but instead of having to type in your search query into a special filtering box above the list of options, the main input box will be used.
<IgrCombo singleSelect></IgrCombo>
tsx
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Selection API
The selection API for a ComboBox with the singleSelect
property applied mostly remains the same, however, there are some important differences compared to ComboBoxes that don't have this property set.
The main difference is that only one item can be selected at any time. For example, if you have specified a valueKey
for your combo component, passing more than one item to the select
/deselect
methods will have no effect. This also means that any previously selected items will automatically get deselected upon making a new selection.
Here's how to select/deselect an item programmatically in a single selection combo.
Selecting items:
// select the item matching the 'BG01' value of the value key field.
comboRef.current.select('BG01');
tsx
To deselect an item without making a new selection, call the deselect
method.
Deselecting items:
// deselect the item matching the 'BG01' value of the value key field.
comboRef.current.deselect('BG01');
tsx
Disabled features
Naturally, some configuration options will have no effect in a single selection ComboBox.
Placeholder
Assigning a value to the placeholderSearch
property will yield no result since the filtering input that usually is placed above the list of options will not be present in a single selection ComboBox.
Autofocusing the list of options
Setting the autofocusList
option on a single selection ComboBox will also have no effect.
Keyboard Navigation
The keyboard navigation should behave the same as with a non-single selection ComboBox, except for the fact that now the main input plays the role of a filtering prompt and so all keyboard actions that apply to the filtering/search input are moved to the main input prompt.
Other Features
All other features will behave the same as in a non-single selection ComboBox component.