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

[BrycePearce]

🚀 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]

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

[BrycePearce]

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

[drmercer]

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.