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

【问题标题】：Dropdown menu flip position issue. React-Select + Material-UI Popper下拉菜单翻转位置问题。 React-Select + Material-UI Popper
【发布时间】：2019-07-26 18:02:43
【问题描述】：

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

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

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

【问题讨论】：

“翻转”是什么意思？能否提供截图和代码？

标签： reactjs drop-down-menu material-ui flip react-select

【解决方案1】：

如果你没有使用<Menu/>自定义组件，你可以使用<Select/>的menuPlacement="auto" 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/

希望对你有帮助！

【讨论】：

【解决方案2】：

我也遇到了同样的问题，对于 <Select /> 组件，我使用了 TomLgls 建议的方法，但对于 <AsyncSelect /> 作为解决方法，我在组件中使用了一些偏移计算：

const rootHeight =  document.getElementById('root').offsetHeight ;
const selectElement = document.getElementById('async_select_container_id');
const selectOffsetBottom=  selectElement.offsetHeight  + selectElement.offsetTop;
...
<AsyncSelect 
  {...listProps}
  menuPlacement={
      rootHeight - selectOffsetBottom > 210 ? 'auto' : 'top'  // react-select menu height is 200px in my case
  }
/>

希望对你有帮助

【讨论】：

【解决方案3】：

如果您创建了 customMenu 组件，那么在其中将 className 设置为 open-menu-top 并为 class 编写以下代码：

.menu-open-top {
  top: auto;
  bottom: 100%;
}

您的 CustomMenu 可能如下所示：

const CustomMenu = ({ children, innerProps, innerRef, selectProps }) => {
      return (
        <div
          ref={innerRef}
          {...innerProps}
          
          className={`rs-menu ${customMenuClass} open-menu-top`}
        >
         {Your Logic}
        </div>
      );
    };

【讨论】：