Antd select and autocomplete list elements 'stick' on inner element scroll

Question

I have a reproduction of the issue on this sandbox: https://codesandbox.io/s/53lnxrwl2k.

What I'm doing there, is setting body, html, #root, .App to height: 100vh; and then having my main flex grow to fill the rest of the viewport, and essentially act as the scrolling area of the application.

html,
body,
#root,
.App {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  height: 100vh;
}

main {
  overflow-y: scroll;
  flex: 1 0 auto;
}

The problem is - if I select an item in the Antd autocomplete - and then I scroll - you can see that the list contents stay on place.

If we inspect the HTML, we can see what it is that Antd inserts the list contents as a separate div element, outside of the react #root element, and applies fixed styling to it:

<div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft" style="width: 200px; left: 158.781px; top: 126px;">
  <div style="overflow: auto; transform: translateZ(0px);">
   <ul role="listbox" class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Burns Bay Road</li>
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Downing Street</li>
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Wall Street</li> 
    </ul>
  </div>
</div>

The important part being:

style="width: 200px; left: 158.781px; top: 126px;">

So what it seems like is what is happening is that Antd is adjusting that style on window scroll - but because my scrolling element is nested - it doesn't detect it to change.

Is there an easy fix to solve this?

Update: This issue seems to be with rc-select - as this repro demonstrates: https://codesandbox.io/s/x2k94o4o9o

Answer 1

As per the author comment you need to set the position relative to container and set the container as popup container, there is property called getPopupContainer in this plugin.

like this

  <div id="testPosition" style={{ position: 'relative' }}>
            hello
            <Select
              getPopupContainer={() => document.getElementById("testPosition")}
              style={{ width: 100 }}>
              <Option value="jack">jack</Option>
              <Option value="lucy">lucy</Option>
              <Option value="yiminghe">yiminghe</Option>
            </Select>
          </div>

Demo

Answer 2

With ant design version 4.5.3, using it with AutoComplete, the way it worked to me was using the getPopupContainer in a different way, like they say in their website:

<AutoComplete
    getPopupContainer={(trigger) => trigger.parentElement}
    ...
/>

Without this, the element was created at the end of the body and it wasn't scrolling. With this it gets created below the parent, and the scrolling works as expected.