Package

@carbon/react

Browser

Chrome

Package version

1.107.1

React version

22

Description

Submenus can be clipped off the edge of the screen when the original menu is near the edge. For example:

You need to use flip() or autoAlign() to avoid that, see https://floating-ui.com/docs/flip.

Reproduction/example

https://stackblitz.com/edit/github-ykbrpwcg-clenyycp?file=src%2FExample%2FExample.jsx

Steps to reproduce

Just open the submenu from my StackBlitz example.

Related issues

RTL placement is also messed up IMO: There's too much overlap. You can see this from the Storybook example when setting dir to RTL:

Contrast this with the LTR layout where there's no overlap:

Suggested Severity

None

Application/PAL

IKC

Code of Conduct

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