React-medium-editor not working in Material UI dialog box

Question

I am trying to implement rich text in a dialog box which I picked from Material-UI. For doing so I am using a package react-medium-editor. If I place it inside dialog box it does not convert the text to rich text but outside the dialog box it does. What can be the problem Here is the sample project that I made to demonstrate.

Codesandbox link

Answer 1

You can make react-medium-editor work with Material-UI's Dialog by setting the prop: disableEnforceFocus to true.

<Dialog 
    disableEnforceFocus 
    open={open} 
    onClose={() => handleClose()
    {...otherDialogProps}
 >
     // Dialog Content
</Dialog>

WARNING: According to Material-UI's docs on 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.