UI Modal Dialog - multiple modal dialogs don't allow keyboard input IE7 / IE6

[wo_sd]

We have pages that have multiple modal dialogs on them. We have a button that opens one modal dialog (called main dialog from here on out), which then has multiple buttons on it to open multiple other modal dialogs (along with numerous inputs). All dialogs are hidden on page load (as in "display: none", not calling .hide()) When we open the main dialog in IE7 / IE6, the inputs don't accept keyboard input, although you can click in them with the mouse. We traced it down to line 9710 in jquery-ui-1.8.13 that is causing the problem (this is part of the code that is blocking any input for any dialog that is not the topmost dialog):

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) {

return false;

}

The input (which is the event.target) is coming in with a z-index of 890, while the maxZ is 1000, which blocks the input. The code at line 9279, in the moveToTop function,

self.uiDialog.css('z-index', $.ui.dialog.maxZ);

is the only code we can find that ever sets a z-index on the dialog or its children. If we change the above code to

if ($(event.target).parents('.ui-dialog').zIndex() < $.ui.dialog.overlay.maxZ) {

return false;

}

then everything works correctly as the z-index is correctly set at 1001.

[wo_sd]

I forgot to mention. We removed all CSS and all of our own JS while tracking this done and we couldn't find anything that was ever setting the z-index of the input (neither could FireBug or IE Developer Toolbar), so we don't think that we were setting the z-index of the inputs to be smaller than 1000.

[wo_sd]

We also understand that the potential fix would only work for properly computing the z-index for any element in a dialog, but, at least for us, we couldn't think of a scenario where we wanted a modal dialog but something outside of the modal dialog to also allow inputs.

If that functionality is desired (which by the code appears to be), the check could be changed to something akin to

if($(event.target).parents('.ui-dialog').length) {

if($(event.target).parents('.ui-dialog').zIndex() < $.ui.dialog.overlay.maxZ) {

return false;

}

} else if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) {

return false;

}

[drewkimrey]

I was unable to recreate this issue in the current version. Could you specify which version of jQuery core you are using as well? ​http://jsbin.com/eriwaj/2/