[Combobox] Add id or custom value to ComboboxOption
See original GitHub issue🚀 Feature request
Upon rendering a list of items inside a Combobox
, I’d love to pass the item id to each option without rendering the id. This would make it easier to handle the onSelect
as I wouldn’t need to filter the list by the selected item string to retrieve the id.
Current Behavior
As far as I know, only text can be passed to the value of ComboboxOption
which will be rendered to the DOM.
Desired Behavior
Pass item id or custom data along.
Suggested Solution
Add an extra id
or data
prop to the ComboboxOption
and pass it along to the onSelect
handler of the Combobox
.
<Combobox onSelect={(value, data) => void alert(`You selected item with index ${data.index}!`}>
<ComboboxInput
aria-label="Cities"
className="city-search-input"
onChange={handleChange}
/>
<ComboboxPopover className="shadow-popup">
<ComboboxList aria-label="Cities">
{results.slice(0, 10).map((result, index) => (
<ComboboxOption
key={index}
data={{index}}
value={`${result.city}, ${result.state}`}
/>
))}
</ComboboxList>
</ComboboxPopover>
</Combobox>
What do you think? If data is the second argument of onSelect
, this wouldn’t be a breaking change.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:28
- Comments:12 (5 by maintainers)
Top Results From Across the Web
c# - ComboBox: Adding Text and Value to an Item (no Binding ...
You can use Dictionary Object instead of creating a custom class for adding text and value in a Combobox . Add keys and...
Read more >LWC Get Combobox Option from custom Object
I am making a combobox and am expecting to get the values from the ID and Name of the custom object. I am...
Read more >Combobox - Reach UI
Custom Rendering in ComboboxOption. Sometimes your items need to be more than just text, in these cases you can pass children to ComboboxOption...
Read more >Combobox (Autocomplete) - Headless UI
Comboboxes are the foundation of accessible autocompletes and command palettes for your app, ... Option key={person.id} value={person} as={Fragment}>.
Read more >Add ComboBox Option Labels Manually - Kendo UI for jQuery
Learn how to manually add an option label in Kendo UI ComboBox. ... id="example"> <div class="demo-section k-header"> <h4>Products</h4> <input id="products" ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Bump on this one. Even exposing the selected option’s key or something would be a huge help.
Do you see any problems in just adding an
onClick
handler to theComboboxOption
component and using that instead of the onSelect?