Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Combobox]: Add the option to have a separate display-only value #945

Open
BrycePearce opened this issue Jul 21, 2022 · 3 comments
Open

Comments

@BrycePearce
Copy link

🚀 Feature request

Current Behavior

The current behavior is that you cannot have a display value that is completely separate from the actual selected value.

For example, using the existing combobox I would be unable to display the list below where the form value is the selected value, and the display value is always the selected displayName

[
  { displayName: 'apple', value: 1 },
  { displayName: 'orange', value: 2 }
] 

Desired Behavior

The desired behavior is that I can have completely separate form and display values when using the combobox. Similar to how the following code snippet would log the selected values while never displaying the value.

<select name="pets" onchange={console.log(this.value)}>
    <option value="1">Dog</option>
    <option value="2">Cat</option>
    <option value="3">Hamster</option>
</select>

Suggested Solution

Implementing a standard or functionality similar to the html select

Who does this impact? Who is this for?

Users of the combobox component who need separate display/actual values

@indiesquidge
Copy link
Collaborator

@BrycePearce how do you feel about creating your own mapping between the display values and what you want the value to be?

@BrycePearce
Copy link
Author

BrycePearce commented Jul 30, 2022

I could probably add a workaround, but is this something you would be open to having a pull request for?

@drmercer
Copy link

drmercer commented Dec 21, 2022

I also am running into this problem, specifically because I have list items with duplicate text values. (The list items are user-defined.) The Combobox component's keyboard navigation currently falls apart when items have matching text values.

To use this combobox, I'll have to distinguish the items in the label text somehow, which is pretty limiting - I'd prefer to be able to distinguish them with decorations, subtitles, etc., but that wouldn't change the text value given to ComboboxOption so wouldn't solve the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants