reactjstinymcetinymce-plugins

TinyMCE table not working/loading correctly on material-ui Modal


I'm using the currrent last version of TinyMCE, and i'm having a struggle with the table plugin. On my project i import the editor in two instances, one on a separate page dedicated only to the editor, and a second one that is being displayed on a material-ui Modal, to make some minor changes over the document.

What happens is that the table plugin seems not to be loading correctly, since i can add whatever columns and rows i want, but they appeared to be disabled to only add a 1x1 table. Table grid

Also... and this is the one that worries me most. Is that the table properties when i focus the table, are not displaying the actual properties window/popup.

TableProps on focus

And if i decided to access those properties by right clicking the table, although the properties windows show up, i cannot change anything there, all properties seems to be disabled.

Properties disabled

If anyone have solution to fix this issue it would really help a lot!

Thank you by advance!


Solution

  • Material UI by default blocks the focus from leaving the modal dialog as noted here: https://mui.com/components/modal/#focus-trap. This then prevents you from interacting with any popups TinyMCE creates. So to fix this you should be able to prevent the focus trap behaviour by adding either disableEnforceFocus or disableEnforceFocus={true}, as noted in the Material UI docs.