CODEWITHSUNDEEP
javascriptjquerywordpresstinymce
Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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

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

enter image description here

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

Upvotes: 5

Views: 4477

Answers (5)

FiddlingAway
FiddlingAway

Reputation: 2255

Late to the party, but perhaps it would be of use to someone. The easiest to implement (in my case - overflowing Bootstrap 4.6.0 modal on an overflowing page, and TinyMCE 5.1.0 initiated inside) was this:

tinymce.init({
    // other init code goes here
    // ....
    setup: function(editor) {
        // This is the key part - it's hiding the overflow of the
        // Bootstrap modal window, since that's what was blocking
        // input focusability in my case
        editor.on("OpenWindow",function(){
            $(".modal").css({
                "overflow-x":"hidden",
                "overflow-y":"hidden"
            });
            
            // Returning the focus to the first input
            if($(".tox-dialog input").length > 0) {
                $(".tox-dialog input").first().focus();
            }
        });

        // Once the overlaying TinyMCE modal window closes
        // return everything as it was
        editor.on("CloseWindow",function() {
            $(".modal").css({
                "overflow-x":"",
                "overflow-y":""
            });
        });
    }
});

The solution itself could be improved - as it is now it only:

  • targets everything with the .modal class, which might not be the best solution - in this case, some adjustments would be needed to check how many ancestor modals are there from where TinyMCE was initiated
  • it's trying to force the focus on the first input it finds within the .tox-dialog modal window, regardless of where in the DOM hierarchy that is, and regardless of whether that input is focusable (no checks for it being disabled, for example) or visible (again, no type checks - what if it runs into type="hidden", for example?)

Upvotes: 0

Davis Jones
Davis Jones

Reputation: 1882

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!

Upvotes: 2

ikhvjs
ikhvjs

Reputation: 5947

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

Upvotes: 1

atmacola
atmacola

Reputation: 387

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);
        }
    });

Upvotes: 1

Pete
Pete

Reputation: 7579

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.

Upvotes: 7

Related Questions