如何放置 React 选择菜单

Question

我尝试在我的项目中修复以下示例。 所以page-wrapper 的高度应该模拟一个有一些内容的页面，因此height CSS 属性。 我故意将select-container 放在中间，以便在其上方和下方都有空间。 例如，如果我在登陆页面时打开菜单，所以还没有滚动，而不是在顶部打开它，ReactSelect 是在底部打开它并将我向下滚动到它。 如您所见，我尝试了menuPlacement = "auto" prop，因为从我在文档中看到的内容来看，它应该自动进行定位，但似乎不起作用。

我的组件

import ReactSelect from "react-select";

const options = [
  { label: "No 1", value: "test_1" },
  { label: "No 2", value: "test_2" },
  { label: "No 3", value: "test_3" },
  { label: "No 4", value: "test_4" }
];

export default function App() {
  return (
    <div className="page-wrapper">
      <div className="select-container">
        <ReactSelect options={options} menuPlacement="auto" />
      </div>
    </div>
  );
}

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-wrapper {
  min-height: 180vh;
  width: 100%;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
}

.select-container {
  width: 90%;
  margin: 0 auto;
}

如果需要，我有一个沙盒代码 here。

Answer 1

好吧，即使这个选项看起来不太清楚，它实际上解决了问题：

<ReactSelect menuPosition="fixed" options={options} menuPlacement="auto" />

顺便说一句，请仔细阅读这里的含义：

https://react-select.com/props

menuPosition 属性文档。

使用absolute，默认情况下（输入后没有足够的空间）：

使用fixed（输入后没有足够的空间）：

如果输入后有足够的空间，则在输入后渲染菜单。

说明

似乎menuPosition 在某种程度上决定了菜单应该如何被视为“空间不足”，类似于 CSS。如果absolute，它指的是父容器中的可用空间（在您的情况下，根据您共享的代码，height 是180vh，就足够了，除非您调整页面大小以使其更小），如果fixed，指的是屏幕可见部分的可用空间。

编辑

在阅读了这个答案的 cmets 之后，即使我认为，在我看来，这个解决方案过于复杂，从用户体验的角度来看可能不太相关，一个可能的解决方法如下：

<ReactSelect options={options} menuPlacement={shouldBePlacedOnTopInstead ? "top" : "auto"} />

使用window 滚动和可见屏幕相关属性计算shouldBePlacedOnTopInstead 状态。