jQuery UI dialog closeOnEscape not working for multiple open dialogs

Question

My scenario:

1. When a particular element in Dialog1 is clicked, Dialog2 opens.

2. When you hit Escape to close Dialog2, works as expected and closes Dialog2.

3. Dialog1 remains and you would think that it could be closed by hitting Escape again, but it doesn't. You have to first click on the dialog and then hit Escape for it to close.

Here's what I have tried, but to no avail:

// Array to hold all of our open dialogs id's
var openDialogs = [];

// the open: method in my dialog
open: function() {

    openDialogs[openDialogs.length] = $(this).attr("id");

}

// the close: method in my dialog
close: function() {

    var index = $.inArray($(this).attr("id"), openDialogs),
    $previousDialog = (index > 0) ? $("#" + openDialogs[index]) : undefined;

    // remove the current dialog from the array via Jon Resig's remove() method
    openDialogs.remove(index);          

    // set focus to previously opened dialog
    if ($previousDialog) { $previousDialog.focus(); }

    // I've even tried:
    //
    // if ($previousDialog) { $previousDialog.dialog("moveToTop"); }

}

Answer 1

This line:

var index = $.inArray($(this).attr("id"), openDialogs),
$previousDialog = (index > 0) ? $("#" + openDialogs[index]) : undefined;

Will make $previousDialog refer to the current dialog (the one being closed). index is the index of the dialog that is being closed.

Therefore, later on this line:

if ($previousDialog) { $previousDialog.focus(); }

Is calling focus() on the dialog that was closed.

I believe what you want is something like this:

close: function() {
    var index = $.inArray($(this).attr("id"), openDialogs),
        $previousDialog = (index - 1 >= 0) ? $("#" + openDialogs[index - 1]) : undefined;

    // remove the current dialog from the array via Jon Resig's remove() method
    openDialogs.remove(index);

    // set focus to previously opened dialog
    if ($previousDialog) {
        $previousDialog.focus();
    }
}

Here's a working example: http://jsfiddle.net/L8J7Y/

I also noticed that if you use $previousDialog.dialog("widget").focus(); instead, you avoid getting the possibly annoying dotted line around the dialog.