Question

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

当菜单在页面底部或浏览器的视口中打开时，翻转菜单存在问题。

是否可以通过Material-UI和react-select来解决此问题？还是我需要写一些自定义的东西？

Answer 1

我也遇到了同样的问题，对于<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
  }
/>

我希望它也有帮助

Answer 2

如果您不使用<Menu/>定制组件，则可以使用menuPlacement="auto"的{{1}}道具，那么您的问题就解决了。

<Select/>

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

否则，您可以选择另一个选择器，material-ui与const components = { Control, // Menu , <-- delete it NoOptionsMessage, Option, Placeholder, SingleValue, ValueContainer };组件提供了2种不同的集成：react-autosuggest和降档。

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

希望有帮助！

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

2 个答案: