Dropdowns don't move on scroll

[stefan-schweiger]

Version

2.13.10

Environment

Windows 10, Chrome 61

Reproduction link

https://codepen.io/anon/pen/jaxdMz?&editors=001

Steps to reproduce

Put a Component with a Dropdown(e.g. DatePicker, Select) in an element with overflow which can be scrolled.

What is expected?

The Dropdown should move with the Component on Scroll.

What is actually happening?

When you scroll inside the element with the mouse wheel the Component itself moves as expected but the Dropdown stays in the same place.

Before Scroll:

After Scroll:

[afc163]

#3438

[afc163]

Duplicate of #8268

[stefan-schweiger]

@afc163 I've tried to set the popup container to every element I can think of but the scroll behavior is still broken.

Example with getPopupContainer:
https://codepen.io/anon/pen/OOZqyw?editors=0010

[stefan-schweiger]

@afc163 This still is making problems with every element I use, can you provide any help as to what I'm supposed to set the PopupContainer to?

[afc163]

https://codesandbox.io/s/4j168r7jw0

[stefan-schweiger]

@afc163 Thanks, but this works only for Select but not for the DatePicker component

https://codesandbox.io/s/mmw6qqrmq8

[afc163]

https://ant.design/components/date-picker/#API

DatePicker has a different prop name: getCalendarContainer

[stefan-schweiger]

@afc163 Thank you very much, I must have overlooked that one.

But is there any reason getCalendarContainter and getPopupContainer don't default to a function which gets the next parent element with a scrollbar? This is what I'm using right now and it works as expected:

getScrollParent(node) {
   if (node.parentElement === null) {
       return node;
   }

   return node.parentElement.scrollHeight > node.clientHeight
       || node.parentElement.scrollWidth > node.clientWidth
            ? node.parentElement
            : getScrollParent(node.parentElement);
}

[oneshubh]

@afc163 I've tried to set the popup container to every element I can think of but the scroll behavior is still broken.

Example with getPopupContainer:
https://codepen.io/anon/pen/OOZqyw?editors=0010

use "getCalendarContainer" for datePicker