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

[domdomegg]

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]

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]

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.

[ichik]

Hi, we're working on a component set that uses React Aria as underlying headless and this is one of the critical UX issues we've encountered. Combobox loses user input completely on blur or after pressing enter. This is a frustrating experience for the end users: even when they type the correct value exactly if they press enter, that value is lost despite the expectation that it will be selected. Similarly, if Combobox is a part of a form users are very likely to enter the value and proceed with Tab to the next field, their input is lost in this case too.

Related issues:

• https://github.com/adobe/react-spectrum/issues/6760
• https://github.com/adobe/react-spectrum/issues/5681