我正在使用Material-UI的<Autocomplete />
组件,但是我希望我的下拉菜单始终显示在底部。因此,我这样做了:
PopperComponent={(props) => <Popper {...props} placement='bottom-start' />}
有时,我的下拉菜单仍会显示在顶部。
此外,当我执行上述操作时,弹出窗口的宽度不再是自动填充的宽度。
然后我决定要更改弹出器的zIndex,以便如果弹出器的位置切换到顶部,应用程序栏将不会覆盖它。
我该如何解决?
答案 0 :(得分:1)
是的,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' } }}
/>