question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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:closed
  • Created 4 years ago
  • Reactions:28
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
igloudecommented, Nov 17, 2020

Bump on this one. Even exposing the selected option’s key or something would be a huge help.

2reactions
dustycommented, Aug 12, 2020

Do you see any problems in just adding an onClick handler to the ComboboxOption component and using that instead of the onSelect?

<Combobox>
  <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}
          value={`${result.city}, ${result.state}`}
          onClick={() => void alert(`You selected item with index ${data.index}!`}
        />
      ))}
    </ComboboxList>
  </ComboboxPopover>
</Combobox>
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found