Material-UI TextField внутри Popper внутри диалога не работает

Question

Элементы ввода Material-UI, такие как TextField, не работают / не могут получить фокус, если они находятся внутри Popper внутри диалога.

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

Значение zIndex для элемента Popper необходимо для отображения Popper перед элементом Dialog.

Пример простых кодов и ящиков: https://codesandbox.io/s/input-inside-popper-inside-dialog-not-working-9y7rg

Answer 1

Вы можете использовать свойство disableEnforceFocus в Dialog (унаследовано от Modal), чтобы исправить это.

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

Связанный ответ: У CKEditor 4 возникла проблема при использовании в диалоге пользовательского интерфейса материала