下拉菜单翻转位置问题。React-Select + Material-UI Popper

Question

我使用 Material-UI lib 文档中的示例自动完成字段。( https://material-ui.com/demos/autocomplete/#react-select )

在页面底部或浏览器的视口打开菜单时，翻转菜单会出现问题。

有没有办法用 Material-UI 和 react-select 解决这个问题？还是我需要写一些自定义的东西？

Answer 1

如果您没有使用<Menu/>自定义组件，您可以使用 的menuPlacement="auto"道具<Select/>，那么您的问题就解决了。

const components = {
  Control,
  // Menu , <-- delete it
  NoOptionsMessage,
  Option,
  Placeholder,
  SingleValue,
  ValueContainer
};

https://github.com/JedWatson/react-select/issues/403

否则你可以选择另一个选择器，material-ui 提供了两个不同的<Popper/>组件集成：react-autosuggest 和 downshift。

https://material-ui.com/demos/autocomplete/

希望能帮助到你！