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

Question

我正在使用 Material-UI 的 <Autocomplete /> 组件，并且我希望下拉列表始终出现在底部。因此我这样做了：

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

我的下拉列表有时仍然出现在顶部。

此外，当我执行上述操作时，我的 popper 的宽度不再是我的自动完成的宽度。

然后我决定要更改 popper 的 zIndex，以便在 popper 的位置切换到顶部时应用栏不会覆盖它。

我该如何解决？

Answer 1

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

对我有用的 hack 如下：

<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' } }}
/>

Answer 2

如果有人还在寻找答案。您可以使用 flip 修饰符

来实现此目的

const CustomerPopper = (props: any) => <Popper
        {...props} 
        modifiers={{
            flip: {
                enabled: false,
            }
        }}
        popperOptions={{
         placement:'bottom',
        }}
    />;

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

Unable to fix popper placement in autocomplete

reactjs

material-ui

popper.js