Antd选择和自动完成列表元素“粘贴”在内部元素滚动上

Question

我在以下沙箱上重现了该问题：https://codesandbox.io/s/53lnxrwl2k。

我在这里所做的工作是将body, html, #root, .App设置为height: 100vh;，然后使main的柔韧性增大以填充视口的其余部分，并基本上充当了应用程序。

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

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

问题是-如果我在Antd自动完成中选择一个项目，然后滚动-您会看到列表内容保留在原位。

如果我们检查HTML，我们可以看到Antd将列表内容作为单独的div元素插入到react #root元素之外，并对其应用固定的样式：

<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>

重要的部分是：

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

所以看来发生了什么事，是Antd在窗口滚动时调整了这种样式-但是由于我的滚动元素是嵌套的-它没有检测到它发生变化。

有解决此问题的简便方法吗？

更新：该问题似乎与rc-select有关-此复制说明显示：https://codesandbox.io/s/x2k94o4o9o

Answer 1

根据作者comment，您需要设置相对于容器的位置并将该容器设置为弹出式容器，此插件中有一个名为getPopupContainer的属性。

像这样

  <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

在蚂蚁设计版本4.5.3中，与 AutoComplete 一起使用时，它对我起作用的方式是使用 getPopupContainer ，就像他们在自己的设计中所说的那样website：

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

否则，该元素将在正文的末尾创建，并且不会滚动。这样，它将在父级下面创建，并且滚动将按预期进行。