adobe / adobe/spectrum-web-components

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

Open
#4,286 6 comments 0 reactions 0 assignees View on GitHub
Component:Combobox Feature stale
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

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.

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.