[Bug]: Inconsistent focus for menu if more than one menu item have nested menu items.

[preetibansalui]

Package

@carbon/react

Browser

No response

Package version

1.61.0

React version

No response

Description

In Menu component if we have more than one item with nested items in it, the focus(Highlights) become inconsistent.

Reproduction/example

Please check attached video

Steps to reproduce

Screen.Recording.2024-07-18.at.14.43.28.mov

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Recap of our conversation today

This is happening because we immediately place focus on the first menu item in a menu, including submenus, and then move focus back to the triggering menuitem when the submenu closes.

• Lets say we have two menu items that have nested submenus, menuitem-a and menuitem-b.
• When a menuitem-a is hovered, it opens and the menuitem-a-submenu
• When the mouse exits menuitem-a, the menuitem-a-submenu leave delay begins, holding the menuitem-a-submenu open for ~300ms.
• At the same time, the mouse enters menuitem-b, which opens menuitem-b-submenu
• The first item in menuitem-b-submenu is focused
• The menuitem-a-submenu leave delay that's been going this whole time finishes, and places focus on menuitem-a

The component is now in the errored state shown in the video above on this issue.

Potential solutions

1. Stop placing focus automatically on the first item of a submenu. Only place focus automatically on the first item in the root menu when it opens. This probably is not what we want to have happen, but should verify with @mbgower.
2. Remove the delay, and replace with a more robust solution, like the Safe Triangle idea from the original issue, [Feature Request]: Improve ContextMenu to provide a safe triangle area #13271. We now have floating-ui, which provides a useHover hook that includes a safePolygon option. This would be a complete fix with no changes in how focus is managed.

I think #2 is the more thorough option.

[mbgower]

The basic behaviour for a submenu is demonstrated by https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/. The focus does not go from a submenu to its child on hover (or click). Either opens the submenu, but keeps focus on the submenu, not its first item. (If there is a delay, it isn't long, and once one submenu is open there appears to be no delay at all (which makes sense to me).

I think the confusion may be that you're taking the action that happens on Enter/Right Arrow, and applying it to hover?