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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Select] Opening a focused Select field using the space key does not work as expected #18691

Closed
2 tasks done
matt-downs opened this issue Dec 5, 2019 · 1 comment 路 Fixed by #18754
Closed
2 tasks done
Assignees
Labels
accessibility a11y component: select This is the name of the generic UI component, not the React module!

Comments

@matt-downs
Copy link

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

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:

  1. Navigate to the Select examples page on the Material UI docs site using the link above
  2. Using the tab key, focus onto one of the Simple Select example inputs
  3. Hit or hold the space key (menu will open and immediately close)
  4. Focus onto one of the Native Select examples
  5. Hit the space key (menu will open as expected)

Below is a gif showing what happens when the space key is hit:
CRDg76RYAc

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 馃寧

Tech Version
Material-UI v4.7.1
React v16.12.0
Browser 72.0.3626.81 (Official Build) (64-bit) (Windows 10)
TypeScript v3.7.2
@eps1lon eps1lon added the accessibility a11y label Dec 5, 2019
@eps1lon eps1lon self-assigned this Dec 5, 2019
@oliviertassinari
Copy link
Member

@matt-downs The behavior changed in #18319, @eps1lon Is on it :)

@oliviertassinari oliviertassinari added the component: select This is the name of the generic UI component, not the React module! label Dec 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants