如何放置 React 选择菜单

Question

我正在尝试在我的项目中修复以下示例。Sopage-wrapper的高度应该模拟一个包含一些内容的页面，因此是heightCSS 属性。我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;
}

如果需要的话，我这里有一个沙箱代码。

Answer 1

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

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

顺便说一句，请仔细阅读此处的含义：

https://react-select.com/props

menuPosition财产文件。

使用absolute，按照默认（并且输入后没有足够的空间）：

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

如果输入后有足够的空间，则菜单将在输入后呈现。

解释

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

编辑

在阅读了对此答案的评论后，即使我认为该解决方案过于复杂，从用户体验的角度来看可能不太相关，但可能的解决方案如下：

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

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