Skip to content

[select] Allow spacebar to select elements#48615

Merged
silviuaavram merged 5 commits into
mui:masterfrom
silviuaavram:fix/select-space
Jun 4, 2026
Merged

[select] Allow spacebar to select elements#48615
silviuaavram merged 5 commits into
mui:masterfrom
silviuaavram:fix/select-space

Conversation

@silviuaavram

@silviuaavram silviuaavram commented Jun 3, 2026

Copy link
Copy Markdown
Member

Reuse handleItemClick in the item key down handler for space bar.

Fixes #43874

@code-infra-dashboard

code-infra-dashboard Bot commented Jun 3, 2026

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-48615--material-ui.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/material 🔺+168B(+0.03%) 🔺+48B(+0.03%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@silviuaavram silviuaavram marked this pull request as draft June 3, 2026 09:06

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Restores keyboard interaction for Select so pressing the Space key while an option is focused selects that option (bringing back the behavior from the previously reverted PR).

Changes:

  • Refactors the internal “clone event + redefine target” logic into a shared clonedOnChange helper.
  • Adds an option-level onKeyDown handler to select/close on Space.
  • Adds a regression test covering Space-to-select.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/mui-material/src/Select/SelectInput.js Adds shared clonedOnChange helper and implements Space key handling on options.
packages/mui-material/src/Select/Select.test.js Adds a regression test asserting Space selects an option.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/mui-material/src/Select/SelectInput.js
@silviuaavram silviuaavram marked this pull request as ready for review June 3, 2026 09:14
@silviuaavram silviuaavram requested a review from Copilot June 3, 2026 09:14

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comment thread packages/mui-material/src/Select/SelectInput.js
Comment thread packages/mui-material/src/Select/SelectInput.js Outdated
Comment thread packages/mui-material/src/Select/SelectInput.js Outdated
@silviuaavram

silviuaavram commented Jun 3, 2026

Copy link
Copy Markdown
Member Author

@mj12albert @mnajdova updated the implementation and kept the key down handler, but now I'm triggering event.currentTarget.click so the handler will receive a click event, instead of keyboard.

I can't really do it like in the button base since we already have a preventDefault in keyUp for a close-after-open fix.

        if (event.key === SPACE) {
          // otherwise our MenuItems dispatches a click event
          // it's not behavior of the native <option> and causes
          // the select to close immediately since we open on space keydown
          event.preventDefault();
        }

Comment thread packages/mui-material/src/Select/SelectInput.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comment thread packages/mui-material/src/Select/SelectInput.js
@silviuaavram silviuaavram merged commit 4abb149 into mui:master Jun 4, 2026
18 checks passed
@silviuaavram silviuaavram deleted the fix/select-space branch June 4, 2026 11:22
@oliviertassinari oliviertassinari added the type: bug It doesn't behave as expected. label Jun 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y scope: select Changes related to the select. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[select] Selecting using the spacebar does not work

5 participants