Question

我正在我的webApp中实现“自动完成”材料ui小部件，但下拉菜单显示在编辑面板的后面。我可以使用箭头键选择选项，但是看不到弹出窗口。如果我删除以下css属性{position：“ fixed”}或{“ z-index”：“ 2000”}中的任何一个，它将起作用，但我的编辑面板将不再正确。因此，似乎需要将下拉列表的zindex设置为2001或其他值，但是我不确定这是如何或是否是最佳解决方案。

我还试图将下拉框的初始值设置为“ ACCU-SEAL 35-532 Bag Sealer”，但出现以下错误：

Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".

所以我尝试将以下内容添加到“自动完成”中：

getOptionSelected={(option, value) => option.label === value}

但是我遇到同样的错误。

我这里有一个代码示例： https://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx

Answer 1

您可以使用disablePortal道具来确保菜单将在当前节点下呈现：

<Autocomplete
    ....
    disablePortal
    ....
/>

设置自动完成下拉列表的Z-index，并使用getOptionSelected

1 个答案: