Reactjs together with TinyMCE editor code plugin

Question

I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)

Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.

It is opened as the following:

1. datatable as react components
2. opens bootsrap modal as react component
3. initializes tinymce on textareas inside of the modal
4. loads the code plugin (which itself then is not accepting any kind of input anymore)

My initilization of the editor looks like this:

componentDidMount: function(){
    tinymce.init({
          selector: '.widget-tinymce'
        , height : 200
        , resize : true
        , plugins : 'code'
    })
}

My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.

Does anybody has an idea, what is causing this or how to simply debug it further?

Thx a lot!

Answer 1

if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}