Package

@carbon/react

Browser

Chrome, Firefox

Package version

116.0.5845.140, 117.0

React version

18.2.0

Description

When tabbing through a sub-menu, after tabbing off of the last menu item, the menu should close. It only closes when tabbing to another submenu heading.

Also, when trying to extend the HeaderMenu to implement a flyout for third-level navigation, the third level menu also fails to close in many scenarios.

The menu should close whenever the user clicks or tabs out of the menu, unless they are moving to a submenu under the current menu item.

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-ui-shell-header--header-w-navigation

Steps to reproduce

In the storybook story, click on "Link 4" to focus on the link and open the submenu.
Press the Tab key to move down through items in the submenu
Note that, when on "Sub-link 3" and Tab key is clicked, focus moves out of the submenu, but the submenu remains open.

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