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.