对话框内的Popper内的Material-UI TextField不起作用答案

【问题标题】：Material-UI TextField inside Popper inside Dialog not working对话框内的Popper内的Material-UI TextField不起作用
【发布时间】：2020-06-22 13:35:26
【问题描述】：

如果 TextField 等 Material-UI 输入元素位于 Dialog 内的 Popper 内，它们将无法工作/无法获得焦点。

<Dialog open={true}>
  ...
  <Popper open={true} style={{zIndex: 1500}}>
    ...
    <TextField />
    ...
  </Popper>
  ...  
</Dialog>

Popper 元素的 zIndex 值是在 Dialog 元素前面显示 Popper 所必需的。

简单的代码框示例：https://codesandbox.io/s/input-inside-popper-inside-dialog-not-working-9y7rg

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用Dialog（继承自Modal）上的disableEnforceFocus 属性来解决此问题。

<Dialog open={true} disableEnforceFocus>
    <SimplePopper />
</Dialog>

【讨论】：

天啊！！！我一直在寻找如何解决这个问题的 2 天。谢谢！