CKEditor 4 having problem when used in Material UI dialog

Question

I am working on a React project where I have used CKEditor 4 on Material UI dialog. When I am trying to use advance options like Math. I am not able to type in, anything on input, textarea fields. I have searched for solutions but all the solutions are with respect to Bootstrap Modal. If anyone has faced the same issue using the Material UI dialog. It will be a great help if you can share the solution.

Solution for Bootstrap Modal: http://stackoverflow.com/a/18554395/778587

Material UI dialog: https://material-ui.com/demos/dialogs/

Attaching the Screenshot for the reference.

Steps to reproduce the issue. - Open https://codesandbox.io/s/vv50789765 for code example

Step 1: Open CKEditor and click on the picture icon highlighted in the screenshot.

Step 2: Once you click on the picture icon another popover will be opened with some input form elements. None of the input form elements is editable, I am not able to type anything in the form elements. Please refer the screenshot.

Answer 1

One of the Modal props is disableEnforceFocus:

If true, the modal will not prevent focus from leaving the modal while open.

Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

Without this property set, every time you try to change focus to one of the input fields in the ckeditor image dialog, the Material-UI Dialog (which uses Modal) automatically brings focus back to itself.

Here's a version of the sandbox with disableEnforceFocus specified which then works:

https://codesandbox.io/s/80pu0