TinyMCE dialogs input fields not working with Materialize

Hey!

I’ve an issue using Materialize and TinyMCE within a modal. TinyMCE dialog input fields are not accessible. I tried to stop events propagation but it doesn’t work.

$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window, .moxman-window").length) {
    e.stopImmediatePropagation();
  }
});

This code works with jQueryUI dialog but not with Materialize. I think the dropdown component had a similar issue: https://github.com/Dogfalo/materialize/issues/1683

Please take a look at this CodePen: https://codepen.io/anon/pen/rKWxwK

Thanks for assistance.

[sigma-technology]

Thank you for the quick response. Recompiling the JS isn’t really an option for us unfortunately as we’re using NPM.

However, your code does work perfectly - I’ve managed to override that function using $.extend, so anyone using jQuery should be able to do the same:

$.extend(M.Modal.prototype, {
  _handleFocus(e) {
    if (!this.el.contains(e.target)
       && this._nthModalOpened === M.Modal._modalsOpen
       && document.defaultView.getComputedStyle(e.target, null).zIndex < 1002) {
      this.el.focus();
    }
  }
});

I’ve updated the codepen.

@Dogfalo I realise this isn’t technically a Materialize issue, but would it be possible to include some sort of generic solution such as the one above into the next release?

[nikolaysm]

It can also be resolved to setting dismissible: false

$(document).ready(function() {
    $('.modal-tinymce').modal({dismissible:false,});
});