Bug: issue related to overflow menu item's z-index and position

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Overflow menu seems to work correctly in storybook only. When using it with the outer frame of CP4S platform, we got the following issues.

• Wrong position of OverflowMenu items and scrolling up the whole page while clicking on OverflowMenu For the click and scrolling issue, you may check the attached demo video.

overflow-menu-click-and-scroll.gif.zip

• Z-index of OverflowMenu items being set too high. It should be covered by the top gradient of the platform frame.

• Scrolling data table also makes the position of overflow menu items in other component changing… For scrolling A but also got B scrolling issue, you may check the attached demo video. scroll a but also affect b.gif.zip

Is this issue related to a specific component? OverflowMenu component

What did you expect to happen? What happened instead? What would you like to see changed?

• OverflowMenu items being placed correctly.
• Clicking on overflow menu button won’t automatically scroll up the whole web page.
• Z-index of OverflowMenu items being calculated dynamically so we can have OverflowMenu items hidden behind top gradient of platform frame when scrolling up the web page.
• Scrolling on A component shouldn’t change the position of OverflowMenu items of B component.

What browser are you working in? FireFox, Chrome

What version of the Carbon Design System are you using?

"carbon-components": "10.23.2"
"carbon-components-react": "7.23.2"

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[emyarod]

this should be resolved in #7323

[SimonFinney]

Thanks @emyarod! That solution resolves the original issue with scrolling, but it looks like this has its own implications 😭

1. Open and close the first OverflowMenu:

1. Scroll and re-open the first OverflowMenu: