React-bootstrap: Modal and event propogation

[kdaker]

I have a dialog with the tinyMCE editor component. The dialog prevents tinyMCE dialogs from receiving focus.

The tinyMCE documentation has a fix, which I've confirmed works for bootstrap 3. Unfortunately, it doesn't seem to work for react-bootstrap.

This is what the suggested fix is:

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

link to original issue:
https://github.com/tinymce/tinymce/issues/782

From what I can see is that in vanilla bootstrap, the last event to be called is the focus on the tinyMCE dialog. However in react-bootstrap, there is an additional focusin event triggered on the modal dialog.

Any ideas?

[kdaker]

Setting enforceFocus to false fixes the issue.