Insert/Edit link modal text fields can't be focused TinyMce Wordpress

Question

I have a TinyMce instance inside a bootstrap Modal.
When i click the "Insert/Edit Link" button, the modal opens correctly but the text fields are not focusable

The checkbox interacts correctly, but If i click the input fields, nothing happens. Ideas?

Answer 1

The actual issue going on here is that most modal systems (Bootstrap Modal, Magnific Popup, etc.) disallow focusing form fields that are not children of the modal. Since TinyMCE appends their dialogs to the body rather than the modal window, they're considered outside of the modal and focusing is prevented.

To allow the user to focus the TinyMCE dialog fields you need to explicitly tell your modal system to allow focusing within those extra dialogs.

In Bootstrap Modals (also on TinyMCE's website)

// Prevent bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
    if ( $(e.target).closest(".container-of-dialog-i-want-to-be-able-to-use").length ) {
        e.stopImmediatePropagation();
    }
});

In Magnific Popup (also on GitHub, also related discussion)

$.magnificPopup.open({

    /** settings **/
    callbacks: {
        open: function() {
            $.magnificPopup.instance._onFocusIn = function(e) {

                // Do nothing if target element is select2 input
                if( $(e.target).closest( '.container-of-dialog-i-want-to-be-able-to-use' ) ) {
                    return true;
                }

                // Else call parent method
                $.magnificPopup.proto._onFocusIn.call(this,e);
            };
        }
    }
});

Obviously, as stated, you should replace .container-of-dialog-i-want-to-be-able-to-use with...you guessed it...the selector for your dialog's container. The idea is that the modal will still prevent all focusing outside of the modal, UNLESS you're trying to focus within the other 'acceptable' containers you've specified.

I'm not 100% sure if there's a single selector that will capture all TinyMCE dialogs that ever spawn, but for my uses--and I was specifically using this with WordPress's link panels--I had success with using .mce-container, #wp-link-wrap as the selectors.

Answer 2

The accepted answer doesn't work for me (focusin hit the bootstrap modal first), here is my solution:

    var modal = $('.modal:visible');
    modal.one('hidden.bs.modal', function() {
        tinymce.remove('textarea.mce-small');
    });
    $(document).off('.tinymodal').on('focusin.tinymodal', function(e) {
        var dialog = $(e.target).closest(".tox-dialog");
        if (dialog.length && modal.find(dialog).length === 0) {
            var wrapper = $('.tox-tinymce-aux');
            modal.append(wrapper);
        }
    });

Answer 3

I am late to this post, but I want to share my experience to this question. I need to implement react-bootstrap and tinymce for my project. The reason already explained by @Pete: "bootstrap take the focus from tinymce." In my case, I just need to pass enforceFocus = false in my react-bootstrap Modal component.

When enforceFocus = true: The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.

Ref.react-bootstrap doc

Answer 4

For Material UI Users

Howdy MUI users. Many of you will have problems with this, especially if you're using the TinyMCE editor in a MUI <Dialog> component. What you're looking for is the disableEnforceFocus prop on the <Dialog> Component that contains your TinyMCE Component. Like this:

  <Dialog
    disableEnforceFocus
    ...
    >
     <Editor />
  </Dialog>

Hope this helps!