Materialize: TinyMCE dialogs input fields not working with Materialize

[Hydr555]

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.

[AdmiralLordM]

I can confirm the issue exists. It was working with the previous versions but updating to 1.0 breaks TinyMCE input fields on their popups.
a temporary fix would be lovely until this is sorted on master

[cakesforfree]

This sucks. i had to re create my views in order to work around this. Please fix it

[Blazzike]

Possible solution would be to check the focused event's element's z-index, if it's lower than that of a modal element, cancel.

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

[sigma-technology]

I'm also experiencing this issue. Here's a codepen for the v1 release.

@Blazzike where would that code go?

[Blazzike]

I'm also experiencing this issue. Here's a codepen.

@Blazzike where would that code go?

This is a change to Materialize's source code. Specifically the modal.js file. You can make the change by replacing the current _handleFocus function and recompiling Materialize.

[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?

[calvaradocl]

I confirm that the fix by @sigma-technology works great with Materialize and TinyMCE. I've been trying to use the method that was posted for JQuery-UI and bootstrap without luck. Thanks!

[dwiky]

@sigma-technology thankyou dude, you're a live saver..
that code is working like a charm.. I've been strugling with this issue for hours...

[nikolaysm]

It can also be resolved to setting dismissible: false

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