Skip to content

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

@matt-downs

Description

@matt-downs
  • 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

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions