spectrum-web-components
spectrum-web-components copied to clipboard
[Feat]: combobox should (optionally) enforce a valid selection
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
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.
If you can only select available options, how is this not an <sp-picker>
instead? Which is to say, why allow text input?
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.
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?
In this particular use case, a Picker with Combobox-like capabilities would be best suited.
This would be more work if we don't implement the other types of combobox first.
Potentially related to #4283