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

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

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

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