CODEWITHSUNDEEP
javascriptreactjsckeditormaterial-ui
Prakash Upadhyay
Prakash Upadhyay

Reputation: 531

CKEditor 4 having problem when used in Material UI dialog

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. enter image description here

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. enter image description here

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. enter image description here

Upvotes: 7

Views: 2797

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81106

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

Upvotes: 17

Related Questions