Search and Top Navigation
#7474 closed bug (worksforme)
Opened June 14, 2011 08:06PM UTC
Closed October 16, 2012 02:27PM UTC
UI Modal Dialog - multiple modal dialogs don't allow keyboard input IE7 / IE6
| Reported by: | wo_sd | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.10.0 |
| Component: | ui.dialog | Version: | 1.8.13 |
| Keywords: | modal | Cc: | |
| Blocked by: | Blocking: |
Description
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.
Attachments (0)
Change History (5)
Changed June 14, 2011 08:14PM UTC by comment:1
Changed June 14, 2011 08:28PM UTC by comment:2
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;
}
Changed September 07, 2011 12:57PM UTC by comment:3
| keywords: | → modal |
|---|
Changed October 11, 2012 02:47PM UTC by comment:4
| milestone: | 1.9.0 → 1.10.0 |
|---|
Changed October 16, 2012 02:27PM UTC by comment:5
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
I was unable to recreate this issue in the current version. Could you specify which version of jQuery core you are using as well?
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.