siriwatknp
commented
2 months ago Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI
Open corytam opened 3 months ago
siriwatknp
commented
2 months ago Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI
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:
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
``` 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.5npx @mui/envinfoSearch keywords: Menu Focus Item Hover