Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
domdomegg opened this issue Apr 26, 2024 · 1 comment

Comments

@domdomegg
Copy link

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
Copy link
Member

We had initially planned to include a completionMode props 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants