[DateTimePickerV2] Flyout scrolls with content when inside a sub-container

[kevinsperrine]

What package is this for?

• [x] React
• [ ] Angular

Describe the bug

When the DateTimePickerV2 is rendered inside a scrollable area (inside of the body) it'll scroll along with the content instead of staying fixed in place. This is because DateTimePickerV2 is always rendered in a portal, and positioned absolutely relative to the body. However, when it's in a section that scrolls this positioning is no longer correct. We should expose the renderInPortal prop used on the FlyoutMenu within the DateTimePickerV2 to give consumers the option of rendering it in the portal or not. Additionally, this prop will need to be added to Cards so that they can pass it to the CardToolbar and eventually to the DateTimePicker for instances of cards having a built-in DateTimePicker.

To Reproduce

Steps to reproduce the behavior:

This type of example will reproduce it.

    <div style={{ backgroundColor: 'blue' }}>
      <div
        style={{
          height: '20rem',
          paddingTop: '10rem',
          paddingBottom: '1000rem',
          width: 400,
          backgroundColor: 'red',
          overflow: 'scroll',
        }}
      >
        <DateTimePicker
          id="datetimepicker"
          dateTimeMask={text('dateTimeMask', 'YYYY-MM-DD HH:mm')}
          relatives={[
            {
              label: 'Yesterday',
              value: RELATIVE_VALUES.YESTERDAY,
            },
          ]}
          hasTimeInput={boolean('hasTimeInput', true)}
          onApply={action('onApply')}
          onCancel={action('onCancel')}
          hasIconOnly={boolean('hasIconOnly', false)}
        />
      </div>
    </div>

Please create a reduced test case in CodeSandbox: https://codesandbox.io/s/github/carbon-design-system/carbon-addons-iot-react/tree/next/packages/react/examples/codesandbox

Expected behavior

The expected behavior is for the picker to stay fixed in the correct position beside its trigger button and not scroll along with the content.

Environment/versions:

• OS: [e.g. MacOS, Windows]
• Browser: [e.g. chrome, safari]
• carbon-addons-iot-react version: [e.g. v2.60.0]

Additional context

Add any other context about the problem here.

Specific timeline issues / requests

Do you want this work within a specific time period? Is it related to an upcoming release?

NB: The core contributors will try to work with your timeline, but it's not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!

[JordanWSmith15]

I would be content if we just closed the flyout without saving whenever the user starts scrolling.

[jessieyan]

@davidicus I think this is the reason why we saw the menu offset in the Horizontal bar PR . If set renderInPortal to false, then DateTimePickerV2 is fixed position and it does not shift when enable the scroll bar to always.

[davidicus]

@davidicus I think this is the reason why we saw the menu offset in the Horizontal bar PR . If set renderInPortal to false, then DateTimePickerV2 is fixed position and it does not shift when enable the scroll bar to always.

yeah, when in portal we have to manage the positioning of the dropdowns.