Hover Menu - Menu Item getting focused and follows cursor

[corytam]

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:

1. 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 #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

[siriwatknp]

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