search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.15k stars 1.06k forks source link

ComboBox: hitting enter when options are visible should select the first option. #6275

Open domdomegg opened 2 months ago

domdomegg commented 2 months ago

Provide a general summary of the feature here

When using the ComboBox, it's quite a common pattern that hitting the 'enter' key automatically selects the first option.

For example, react-select has this behaviour and is one of the most popular ComboBox libraries. Additionally Material UI (with option autoHighlight), Ant Design, Fluent UI, Headless UI, Blueprint, and W3's aria example have this behaviour. (I actually couldn't easily find another library that doesn't support this).

If there is a way to do this easily with ComboBox already I'd love to know, but I think I've read the docs fairly closely and it doesn't seem obvious at least how to do this.

🤔 Expected Behavior?

When using a ComboBox, hitting enter while the popup is open selects the first result

😯 Current Behavior

When using a ComboBox, hitting enter while the popup is open cancels the selection

💁 Possible Solution

No response

🔦 Context

We're using the ComboBox in our web applications,

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

reidbarber commented 2 months ago

We had initially planned to include a completionMode prop that would implement the aria-autocomplete="both" pattern described below:

The aria-autocomplete property describes the type of autocompletion interaction model a textbox, searchbox, or combobox will use when dynamically helping users complete text input. It distinguishes between two models: the inline model (aria-autocomplete="inline"), which presents a single predicted value and the list model (aria-autocomplete="list"), which presents a collection of possible values in a separate element that pops up next to or below the text input, similar to a . A third value, aria-autocomplete="both" is for when the interface will present a list while also including a predicted value. The default is none, meaning the textbox, searchbox, or combobox will not provide an auto complete value.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete#description

We ran into some issues with screen readers, but we plan to revisit this.

I think adding an option to auto-focus the first element is another option to potentially explore.

GeorgS commented 3 weeks ago

Currently migrating from mui/base to react-aria and this one of the features we miss. Focusing the first element in the ListBox of the currently filtered items would do the trick.