问题
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.
回答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
来源：https://stackoverflow.com/questions/56046466/ckeditor-4-having-problem-when-used-in-material-ui-dialog