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

Question

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

在页面底部或浏览器视口(viewport)打开菜单时出现翻转菜单问题。

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

Answer 1

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

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

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

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

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

希望对您有所帮助!