adobe / adobe/spectrum-web-components

[Feat]: Update combobox autocomplete behavior

Open
#4,822 1 comment 0 reactions 0 assignees View on GitHub
Component:Combobox Feature
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)

combobox

### Description of the requested feature

Here’s a refined version of the feature request description:

Our [current combobox autocomplete implementation](https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/combobox--list-autocomplete) adheres to the W3C example for combobox patterns ([see example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/)). However, we have received customer feedback requesting a more common behavior: when a value is provided in the input, the full list of options should remain visible. The list should only be filtered once the user starts typing or deletes characters.

Currently, users must clear the entire input to view all available options when a default value is set or selected. This can create confusion, as they expect to see all options without having to clear the field.

React Spectrum’s [combobox implementation](https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#content) already supports this requested behavior.

W3C guidelines do not specifically prohibit this requested behavior, so we would still be conforming to the standards while making this change.

Next steps may involve some research to determine if this behavior should become the default for our component or if it should be an optional configuration and we should confirm with design whether to maintain the current behavior as an option or entirely switch to the new behavior by default.

### Mockups or screenshots

Current state:
Screenshot 2024-10-15 at 17 03 43

Requested state:
Screenshot 2024-10-15 at 17 09 30

### Implementation notes or ideas

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the combobox list-autocomplete Storybook example and compare its current behavior with the requested state. Review the W3C combobox pattern and React Spectrum ComboBox behavior, then confirm with design whether showing all options for an existing value should be the default or an optional configuration. Done means the chosen behavior is implemented and demonstrated in the combobox example.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.