[Bug]: overflowmenu nested with 3 level of menus has bad display

[laurentdeltourbe]

Package

@carbon/react

Browser

Chrome

Package version

10.71.0

React version

No response

Description

If you create an overflowmenu like this (following recommendation from https://react.carbondesignsystem.com/?path=/story/components-overflowmenu-feature-flag--nested)

import {
  MenuItem,
  OverflowMenu,
  unstable_FeatureFlags as FeatureFlags,
} from '@carbon/react';

export default function App() {
  return (
    <div>
      <FeatureFlags
        flags={{
          'enable-v12-overflowmenu': true,
          'enable-v12-dynamic-floating-styles': false,
        }}
      >
        <OverflowMenu>
          <MenuItem label="Level 1" />
          <MenuItem label="Level 1" />
          <MenuItem label="Level 1">
            <MenuItem label="Level 2" />
            <MenuItem label="Level 2" />
            <MenuItem label="Level 2" />
            <MenuItem label="Level 2">
              <MenuItem label="Level 3" />
              <MenuItem label="Level 3" />
              <MenuItem label="Level 3" />
            </MenuItem>
          </MenuItem>
          <MenuItem label="Level 1" />
        </OverflowMenu>
      </FeatureFlags>
    </div>
  );
}

you get a weird display of third level menu as shown below:

It work as expected with similar example but only with 2 levels same as provided in https://react.carbondesignsystem.com/?path=/story/components-overflowmenu-feature-flag--nested)

Reproduction/example

https://stackblitz.com/edit/github-df8gmeej?file=src%2FApp.jsx

Steps to reproduce

• use the code provided in the description
• open the menus until reaching a 3rd level item

Suggested Severity

Severity 2 = User cannot complete task, and/or no 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]

@guidari this looks like a reoccurence of #17781? That shipped in 1.69.0. The reported version here is 10.71.0 but I'm assuming that might be a typo @laurentdeltourbe?

[laurentdeltourbe]

yes, I'm on 1.71.0 (not 10.17.0) and this can be reproduced with stackblitz using latest version (I assume 1.73.0) (see https://stackblitz.com/edit/github-df8gmeej?file=package.json).

[guidari]

@guidari this looks like a reoccurence of #17781? That shipped in 1.69.0. The reported version here is 10.71.0 but I'm assuming that might be a typo @laurentdeltourbe?

Yeah! I didn't test this usecase with more Nested items before. We should definitely take a look at that.

[guidari]

For future reference.
I guess I might have an idea what the problem is. Looks this data-floating-ui-inert is not being aplied to the last Menu component. Maybe it's nothing, since it is just on the icon...

[janhassel]

@guidari I think this might be the same issue I ran into over here: #18153 (comment)

In a nutshell, an element with position: fixed inside an element using transform will refer to that element's padding-box. I think we need to use absolute positioning instead of transform for MenuItem similar to how I changed it for MenuButton: 8c9df92