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

[base-ui][useSelect] Keyboard operations on the activation button not working for HTML element different than "button" #40486

Closed
smellai opened this issue Jan 8, 2024 · 6 comments · Fixed by #40643
Assignees
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base regression A bug, but worse

Comments

@smellai
Copy link

smellai commented Jan 8, 2024

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/boring-dawn-c5rxjv?file=%2Fsrc%2FDemo.tsx

Steps:

  1. focus combobox with keyboard
  2. try to activate it with spacebar or Enter
  3. dropdown not showing up
  4. change "div" to "button" in line 42 of Demo.tsx
  5. it works as expected

Current behavior

pressing spacebar or Enter not activating the dropdown for the combobox

Expected behavior

pressing spacebar or Enter should open the combobox overlay

Context

I don't think "button" html element should be necessary as the role is overridden to "combobox" in any case.
It was working fine in @mui/base 5.0.0-beta.25

Your environment

npx @mui/envinfo
 System:
    OS: macOS 14.2.1
  Binaries:
    Node: 18.18.0
    npm: 10.2.4 
  Browsers:
    Chrome: 120.0.6099.199
    Edge: Not Found
    Safari: 17.2.1
  npmPackages:
    @mui/base: 5.0.0-beta.30 => 5.0.0-beta.30 
    @mui/core-downloads-tracker:  5.15.3 
    @mui/material: 5.15.3 => 5.15.3 
    @mui/private-theming:  5.15.3 
    @mui/styled-engine:  5.15.3 
    @mui/system:  5.15.3 
    @mui/types:  7.2.12 
    @mui/utils:  5.15.3 
    @types/react: 17.0.2 => 17.0.2 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.9.5 => 4.9.5 

Search keywords: keyboard select combobox

@smellai smellai added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 8, 2024
@zannager zannager added component: select This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base labels Jan 8, 2024
@danilo-leal danilo-leal changed the title [base-ui] [useSelect] keyboard operations on the activation button not working for HTML element different from "button" [base-ui][useSelect] Keyboard operations on the activation button not working for HTML element different than "button" Jan 9, 2024
@smellai
Copy link
Author

smellai commented Jan 11, 2024

The issue persists in "@mui/base": "5.0.0-beta.31"

@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Jan 13, 2024

It stopped working since version 5.0.0-beta.29. It might be related to #39675 which was released in 5.0.0-beta.29. @DiegoAndai may have better insight on this issue.

@ZeeshanTamboli ZeeshanTamboli added regression A bug, but worse and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 13, 2024
@ZeeshanTamboli ZeeshanTamboli added the bug 🐛 Something doesn't work label Jan 13, 2024
@DiegoAndai
Copy link
Member

Thanks for the report @smellai! I opened a PR with the fix.

@smellai
Copy link
Author

smellai commented Feb 9, 2024

This issue is fixed (thanks!) but in the latest versions aria-activedescendant attribute was removed from comboboxes and tabindex="-1" added to the list elements. Is this expected? is the change documented somewhere?

@DiegoAndai
Copy link
Member

in the latest versions aria-activedescendant attribute was removed from comboboxes and tabindex="-1" added to the list elements.

It is expected: https://github.com/mui/material-ui/blob/master/CHANGELOG.md#muibase500-beta29. The change should be seamless. Has it impacted you negatively? Let me know and I can help with the migration.

@smellai
Copy link
Author

smellai commented Feb 22, 2024

Yes, sorry I finally found the time to debug, will open a new issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base regression A bug, but worse
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants