When DatePicker in scrolling container, the calendar popup doesn't scroll with it

[kglickman]

What package(s) are you using?

• [x ] carbon-components
• [x ] carbon-components-react

Detailed description

When the DatePicker with a Calendar is contained in a scrolling container with the calendar open, and you scroll using a scroll wheel (or another scroll mechanism that does not cause focus to be lost), the calendar popup becomes separated from the date input field.

Is this issue related to a specific component?
DatePicker

What did you expect to happen? What happened instead? What would you like to
see changed?
When you scroll and the DatePicker input box moves up, I would expect the calendar popup to remain attached to the bottom of the input box. If the scroll bar is on the page, that is what happens. However, if the scroll bar is inside the page, the calendar popup gets separated.

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
"carbon-components": "^10.6.0",
"carbon-components-react": "^7.6.0",

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

Steps to reproduce the issue

Using the linked code sample:

1. Click on the input box to open the calendar popup
2. Without moving the mouse or changing focus, scroll down .
   The calendar stays where it is, while the input field moves up.

Please create a reduced test case in CodeSandbox
https://codesandbox.io/s/2vw3r

Additional information

[asudoh]

Hi 👋 thank you for bringing this up! You can use options.appendTo in vanilla, appendTo prop in React.

[kglickman]

@asudoh Hi Akira. I tried a bunch of things to get it to append to someplace besides the body, with no success. When I looked at the source code, I may be missing something, but it looks like appendToNode never gets initialized to the prop that was passed in.

[asudoh]

I now see appendTo prop is broken - Reopening.