Material-UI TextField inside Popper inside Dialog not working

Question

Material-UI input elements like TextField are not working / can not get the focus if they are inside a Popper inside a Dialog.

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

The zIndex value for the Popper element is necessary to display Popper in front of the Dialog element.

Simple codesandbox example: https://codesandbox.io/s/input-inside-popper-inside-dialog-not-working-9y7rg

Answer 1

You can use the disableEnforceFocus property on Dialog (inherited from Modal) to fix this.

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

Related answer: CKEditor 4 having problem when used in Material UI dialog