Redactor - input elements in "insert link" dialog cannot get focus

Question

I am trying to do something similar to what this page is doing.

The only difference is that the jQuery UI dialog I use is modal.

I tried editing the script in the page to make the jQuery UI dialog modal.

$("#dialog-modal").dialog(
{
    modal: true, // added this line to make dialog modal
    width: 600,
    height: 400,
    open: function(event, ui)
    {
        var textarea = $('<textarea style="height: 276px;">');
        $(textarea).redactor({
            focus: true,
            maxHeight: 300,
            initCallback: function()
            {
                this.code.set('<p>Lorem...</p>');
            }
        });
    }
 });

I then clicked on the insert link button(the 3rd button from the right in the toolbar). This shows another jQuery UI modal dialog with a form.

I noticed that I cannot get the focus of the text fields. I cannot type anything into them.

The code works fine if I don't make the the first dialog modal.

Any idea how to circumvent this?

score -1 · Answer 1 · edited May 23 '17 at 11:54

I ran into the same problem. This behavior is a result of jQuery UI handling focusin.dialog event on the document, and putting the focus back to the last jQuery UI dialog in the stack (using selector ".ui-dialog:visible:last"). I solved the problem by calling this code right after my modal dialog was created:

setTimeout(function() {
    $(document).unbind("focusin.dialog");
}, 100);

I used setTimeout, because jQuery UI also uses setTimeout to bind this event. I was able to fix it thanks to this answer: jQuery UI Focus Stealing. I also tried upgrading to jQuery UI 1.11.4 but that does not solve the problem.

Redactor - input elements in "insert link" dialog cannot get focus

1 Answers1