无法修复自动完成中的弹出窗口位置

问题描述

我正在使用Material-UI的<Autocomplete />组件，但是我希望我的下拉菜单始终显示在底部。因此，我这样做了：

PopperComponent={(props) => <Popper {...props} placement='bottom-start' />}

有时，我的下拉菜单仍会显示在顶部。

此外，当我执行上述操作时，弹出窗口的宽度不再是自动填充的宽度。

然后我决定要更改弹出器的zIndex，以便如果弹出器的位置切换到顶部，应用程序栏将不会覆盖它。

我该如何解决？

解决方法

是的，placement 在 Autocomplete 的 Popper 中使用时似乎已损坏（material-ui v. 4.11.4）。

对我有用的黑客如下：

<Autocomplete
  // Force menu to open below,with the correct width
  PopperComponent={({ style,...props }) => (
    <Popper
      {...props}
      style={{ ...style,height: 0 }} // width is passed in 'style' prop
    />
  )}
  // Set menu max height (optional)
  ListboxProps={{ style: { maxHeight: '30vh' } }}
/>