[Select] Opening a focused Select field using the space key does not work as expected #18691
Closed
2 tasks done
Labels
accessibility
a11y
component: select
This is the name of the generic UI component, not the React module!
Current Behavior 馃槸
When interacting with the Select component using a keyboard, hitting the space key when focused on the component opens and then immediately closes the menu, selecting the first option. Options can be selected by holding space, navigating using the arrow keys, and then releasing the space key, but I doubt this is intended functionality.
Expected Behavior 馃
When focused on the Select component, hitting the space key should open the menu and allow the user to select an option in the same way as hitting the enter key - This is how the Native Select component works.
One thing I did notice is that when using a native select, the space key is able to open the options menu however it is not able to select an option (only the enter key seems to be able to do this) - unsure if we want to replicate this exact functionality in the Select component or have the space key work exactly the same as the enter key. This could be specific to Chrome also, as I haven't tested on other browsers.
Steps to Reproduce 馃暪
This issue can be reproduced on the docs site easily:
https://material-ui.com/components/selects/
Steps:
Below is a gif showing what happens when the space key is hit:
Context 馃敠
In our application we have a form built from MUI components - using the keyboard to navigate between inputs is a feature that is commonly used.
Your Environment 馃寧
The text was updated successfully, but these errors were encountered: