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

user_1068446 0
Viewed 7184

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.

enter image description here

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

antd reactjs css
2 Answers

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

user_26308170

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.

user_45083410
Related