Antd выбрать и автозаполнить элементы списка «придерживаться» на прокрутке внутреннего элемента

Question

У меня есть репродукция проблемы в этой песочнице: https://codesandbox.io/s/53lnxrwl2k.

То, что я делаю там, это установка body, html, #root, .App в height: 100vh;, а затем мой main flexрасти, чтобы заполнить остальную часть области просмотра, и, по сути, выступать в качестве области прокрутки приложения.

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, за пределами реагирования *Элемент 1018 * и применяет к нему фиксированный стиль:

<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

Согласно автору комментарий вам нужно установить позицию относительно контейнера и установить контейнер как всплывающий контейнер, в этом плагине есть свойство с именем 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>

Демо