adobe / adobe/spectrum-web-components
[Feat]: combobox should (optionally) enforce a valid selection
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### 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](https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/combobox--list-autocomplete), 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.
Contributor guide
Research direction
Start with the sp-combobox list-autocomplete Storybook example and review the current blur, selection, change, and invalid-state behavior. Clarify whether the opt-in behavior should clear text or mark it invalid, and how exact text matches are handled; done means the selected behavior and its opt-in property are specified and verified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 28/100