[Bug]: sp-combobox value is not equivalent to the currently selected menu item

[nickschaap]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Combobox

Expected behavior

Let's say I have the following markup:

<sp-combobox size="m" label="Color">
    <sp-menu-item value="red">Red</sp-menu-item>
    <sp-menu-item value="green">Green</sp-menu-item>
    <sp-menu-item value="blue">Blue</sp-menu-item>
</sp-combobox>

I would expect that when I select the "Red" menu item in the combobox that the value of the comboxbox changes to red which is the value of the selected menu item.

Actual behavior

The sp-comboxbox value is Red which is the label of the menu item. Not the value.

Screenshots

No response

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Go to https://opensource.adobe.com/spectrum-web-components/components/combobox/#sizes
2. Open the comboxbox, click "Red"
3. Inspect the comboxbox element in the console
4. Check the value of the combobox
5. Observe that value as Red

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

The Combobox is less a fancy <select> (as seen with Picker) than a fancy <input> (as seen with Textfield) and should maintain a value that is the same as what is visible at all times. This can be particularly important when accepting values that are not represented by Menu Items provided to the Combobox, due to open user input. The conversion from value to key, as available, is pretty straight forward and we would definitely be open to a contribution of a property along the lines of valueKey (or an even classier name) to surface in parallel a matched item key when present.