How can I make all menu items lose focus when the mouse leaves the menu?

[lixiaoyan]

The behavior I'm looking for is similar to the menus in macOS or the Menu component in Base UI. Currently, with RAC, when the mouse leaves the menu, the last hovered menu item still retains focus. As a result, pressing the Enter key will trigger that menu item.

Base UI: https://base-ui.com/react/components/menu

Screen.Recording.2026-06-01.at.11.05.00.PM.mov

RAC: https://react-aria.adobe.com/Menu

Screen.Recording.2026-06-01.at.11.05.40.PM.mov

There's also a bug here: after opening the menu, if you click outside without hovering over any menu item, the first menu item briefly appears in a focus state during the closing process.

Screen.Recording.2026-06-01.at.11.06.28.PM.mov

[snowystinger]

The one in base-ui appears to match native menu behaviour in MacOS. Including hovering off, then using the ArrowDown; it starts from the first item, not the last hovered. I'm not sure I remember entirely why we made it behave the way it is now. Will see if anyone else remembers.

[lixiaoyan]

It doesn't look like we can easily work around this issue in our application code, because for cases where a menu contains an autocomplete, we also need to account for virtual focus (on macOS, the input still retains focus). Any suggestions on a good approach?

[lixiaoyan]

Screen.Recording.2026-06-09.at.5.38.38.PM.mov

[snowystinger]

I don't have any suggestions right now.

It seems as though we followed examples like https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/

Unfortunately, making a change like this would mean also checking and probably updating cases like submenus/safe triangle cases and also for autocomplete/combobox virtual focus. So it'd be non-trivial.