Hover Menu - Menu Item getting focused and follows cursor
@DiegoAndai is already working on this.
Since Aug 2, 2024.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Mostly similar code to documentation
https://mui.com/joy-ui/react-menu/#side-navigation-icons
Link to live example: [(required)]
https://codesandbox.io/p/sandbox/laughing-glitter-n6zqzf?file=%2Fsrc%2FProfileButton.tsx%3A98%2C17
Steps:
- Hover over menu button
2.Hover over menu items and "focus ring" will also follow
3.Clicking test button to get focus away will now prevent focus from showing up on menu items
Current behavior
Menu item gets focused when menu is opened via hover action on the MenuButton , and focus follows my cursor.
The focus goes away if I navigate through my site and go to the page with this menu and hover on it.
It can also be removed by pressing tab or click on other elements.
It is 100% replicable when i refresh my page on where the menu is and hover on it.
https://github.com/user-attachments/assets/50fcffda-afec-4abb-82ee-d4c62d216124
.
Expected behavior
No focus on Menu Items , focus doesnt follow cursor.
Context
I read a similiar issue with Select https://github.com/mui/material-ui/issues/23747, I assume it is using the same components and causing a similar issue.
I also noticed the first MenuItem has a tabindex of 0 and the rest have -1.
Pressing tab removes the blue focus , navigating around on my page/website before going to the menu prevents this issue also , but everytime when i refresh on the page and go to the hovermenu , a blue focus ring will follow my cursor.
Your environment
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Version 127.0.6533.89 (Official Build) (64-bit)
Edge: Chromium (127.0.2651.74)
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.42
@mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d
@mui/icons-material: ^5.15.20 => 5.15.20
@mui/joy: ^5.0.0-beta.36 => 5.0.0-beta.36
@mui/material: ^5.15.20 => 5.15.20
@mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab
@mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab
@mui/system: 6.0.0-dev.240424162023-9968b4889d
@mui/types: 7.2.14
@mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab
@mui/x-date-pickers: ^7.9.0 => 7.9.0
@types/react: ^18.3.3 => 18.3.3
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.4.3 => 5.4.5
Search keywords: Menu Focus Item Hover
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.