spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

[Feat]: combobox should (optionally) enforce a valid selection

Open Rocss opened this issue 10 months ago • 6 comments

Code of conduct

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

Impacted component(s)

sp-combobox

Description of the requested feature

sp-combobox is a great way to search through a large collection of options, such as countries or cities. Using the example from here, I'd like to encourage users to select a valid option by clicking the option in the dropdown when it appears.

Right now you can tab away from the combobox and the input remains populated. No change event was triggered, because you did not select anything. No invalid state is shown, to indicate that I did not select a valid option.

So from a user perspective, it is not clear if the combobox actually has an option selected. As a user I can even make a small typo and not realise until I try to submit the form.

Mockups or screenshots

Screenshot 2024-04-22 at 16 26 19

Implementation notes or ideas

Option 1: on blur, clear the input if nothing was selected Option 2: on blur, automatically mark the combobox as invalid, if the textfield has text, but no option was selected. If the text is identical to an option, should we auto-select it on blur?

Given that Combobox was released with the flexibility that has today, it would be breaking for current consumers to introduce such changes without an optional property. It can be an optional behaviour enabled through a property or attribute.

Rocss avatar Apr 22 '24 13:04 Rocss

If you can only select available options, how is this not an <sp-picker> instead? Which is to say, why allow text input?

Westbrook avatar Apr 22 '24 20:04 Westbrook

This was a request from one of our teams, use case being countries / states. Initially they used a Picker, but being that there are a lot of states, the decision was to use something with autocomplete, and now here I am :). Picker can be used as well, and the behaviour described in this issue can be accomplished from the outside using input and change events, if this is something that would not be ideal for SWC contribution.

Rocss avatar Apr 23 '24 15:04 Rocss

Right now we're mainly gathering data for planning and architecting.

Information that may not be publicly available yet also includes that a "Select only Combobox" is in the long term plans; this is essentially a more capable sp-picker.

Then typing could be done, but not "free typing". Could you circle back with your team as to which of the three options (a managed Combobox, a Combobox with an expanded API, a Picker with Combobox-like capabilities) feel more appropriate to their use case?

Westbrook avatar Apr 23 '24 15:04 Westbrook

In this particular use case, a Picker with Combobox-like capabilities would be best suited.

Rocss avatar Apr 26 '24 13:04 Rocss

This would be more work if we don't implement the other types of combobox first.

najikahalsema avatar May 22 '24 14:05 najikahalsema

Potentially related to #4283

najikahalsema avatar May 22 '24 14:05 najikahalsema