carbon
carbon copied to clipboard
Sage
Menu submenus overlap when using mouse and keyboard
Current behaviour
Only one submenu should be displayed at a time, and normally that's the case, but there is an edge case where two submenus might be open at once:
- Navigate to the Menu component in the Carbon Storybook
- In the default example, use the mouse to hover over 'Menu Item Three' in any of the colour schemes
- Click the 'Menu Item Three' button label in order to place your cursor on that element
- Press the ⇥ (Tab) key to move your focus into the submenu
- Tab through the items in the submenu and onto the next top-level menu item labelled 'Menu Item Four'
- Press Enter, Space, ↓ (down arrow), or ↑ (up arrow) to open the submenu for 'Menu Item Four'
The submenu for 'Menu Item Four' overlaps the right edge of the submenu for 'Menu Item Three'.
Expected behaviour
When a second submenu is opened, the first submenu should close. In this example, when the submenu for 'Menu Item Four' is opened with Enter, Space, ↓, or ↑, the submenu for 'Menu Item Three' should be closed.
CodeSandbox or Storybook URL
n/a
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
Current
Design Tokens Version
No response
What browsers are you seeing the problem on?
Other
What Operating System are you seeing the problem on?
Other
Anything else we should know?
This is present on all operating systems listed and all browsers listed.
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
:tada: This issue has been resolved in version 111.8.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
