React overflow menu doesn't handle scrolling when inside a fixed position element

[ethanwinters]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

We are trying to use Carbon inside a fixed position widget. Many of the components (datepicker, overflowmenu, etc) run positioning calculations off of the body. This creates issues when they are created inside of a fixed position element as they don't "stick" to the fixed position elements during scroll behaviors. This issue is specifically in regards to overflowmenu only.

Is this issue related to a specific component?

This issue is specifically for the overflowmenu component

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

If I scroll a page with a overflowmenu inside a fixed element, the overflowmenu should stay in the correct place and not scroll with the page.

The DatePicker component takes an optional appendTo prop to decide where the popup code should be written to. In #8748 I propose also exposing the positionElement prop in the underlying flatpickr component. Overflowmenu mirroring that API by adding optional appendTo and positionElement props makes a lot of sense to me.

What version of the Carbon Design System are you using?

Latest

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

Watson Assistant (web chat). We need this by end of June to finish our migration to Carbon from our own "fake Carbon" because Carbon couldn't reach our needs in the past. This work will allow us to bring in a overflowmenu inside Watson Assistant web chat (which is end user facing with millions of user impressions).

Steps to reproduce the issue

Open an overflowmenu and scroll. The input field inside the div with position fixed will stay, the overflowmenu will scroll with the page.

Please create a reduced test case in CodeSandbox

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

https://codesandbox.io/s/zealous-browser-urmn7?file=/src/index.js

Additional information

• Screenshots or code
• Notes

[emyarod]

adding data-floating-menu-container to an ancestor element instead of body should resolve the issue https://codesandbox.io/s/jovial-bohr-c5h7u