Nested TinyMCE modal input controls not getting focused

Question

After failing to load 5 TinyMCE editors on one page, I decided to create "edit" buttons which then loads the editor inside a modal.

<Modal.Body>
      <FormGroup className="mb-3">
        <Editor name="text" label="Text" /> //My TinyMCE object
      </FormGroup>
</Modal.Body>

But when any of the TinyMCE features opens a modal of its own, none of its input controls are getting focused. Tried setting autoFocus to false on the Bootstrap Modal but still no use. I found this has been addressed in the past, as in this question. However, like the same, most responses are tailored for jQuery, which I'm not familiar with. Any React based solution?

Answer 1

Assuming you're using the react-bootstrap library, then you'd need to set the enforceFocus prop to false (instead of autoFocus). See https://react-bootstrap.github.io/components/modal/#modal-props

The reason this is needed is that bootstrap will try to ensure that the focus never leaves the modal dialog for accessibility purposes. This is normally fine, however in this case it conflicts with TinyMCE which itself needs to open new modal dialogs and focus the content inside (as you've already alluded to).