search

adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.22k stars 191 forks source link

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

Open nickschaap opened 2 months ago

nickschaap commented 2 months ago

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 commented 2 months ago

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.