Ticket #5466 (closed bug: fixed)

Opened 4 years ago

Last modified 21 months ago

Dialog: "modal" Dialog Incorrectly Cancels Input Events

Reported by: mankyd Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8
Keywords: modal Cc:
Blocking: Blocked by:

Description

This line of code is incorrect:

return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ);

When the dialog is built from an element that has a low z-index, that line of code causes all input interactions to be canceled.

I.E. When the dialog HTML looks something like this:

<div class="modal-dialog" style="z-index: 1002">
   <div class="contents" style="z-index: 10;">
        <input type="checkbox" />
   </div>
</div>

The checkbox will not be clickable even though it is contained within the dialog.

Change History

comment:1 Changed 4 years ago by mankyd

A more specific example:

<style>
.my-popup { z-index: 10; }
</style>

<script type="text/javascript">
var popup = $('<div class="my-popup"><input id="xyz" type="checkbox" /></div>');
popup.dialog({modal:true});
</script>

The checkbox will not be clickable.

Note that if the style is inline, it works just fine.

comment:2 Changed 4 years ago by mankyd

Note, oas of 1.8.1 this problem still exists in IE7. It does not seem to happen in other browsers.

comment:3 Changed 3 years ago by scott.gonzalez

#7608 is a duplicate of this ticket.

comment:4 Changed 3 years ago by scott.gonzalez

  • Keywords modal added

comment:5 Changed 3 years ago by fgutmann

Just stumbled upon this problem in version 1.8.16. Multiple browsers are effected. At least, Chrome, Firefox and IE :-)

I would suggest to raise priority because this is pretty nasty.

Last edited 3 years ago by fgutmann (previous) (diff)

comment:6 Changed 3 years ago by cowtownfarmboy

I have worked on getting an application coded and up to the point of using a modal dialog and have finaly gotten everything to function as I want it to do. Now got hit with this error. It was very dissappointing. The work around in the previous comments is not clear. But with just as little code you can make this work.

What you need to do is to set the values of the objects you are going to include ni the dialog box higher then the container they are carried in. In mankyd's example above set the z-index higher and the modal will work. So in the first example where there are two div's set the outside div to a z-index of x and the inside div to a z-index of x + 1 and it should work.

Thank you

Last edited 3 years ago by cowtownfarmboy (previous) (diff)

comment:7 Changed 3 years ago by mankyd

We were just bit hard by this bug again in IE7. Is there any plan for a fix? This is a nasty one.

comment:8 Changed 3 years ago by j2jensen

We just ran into this bug, and in our case we cannot just change the z-index, since elements of the same class appear both inside and outside of our dialog, and we don't want those elements to show through the overlay when they are outside the dialog.

Thanks to mankyd's good bug description, we quickly found the source of the bug and came up with this fix (version 1.8.14). Change the following code:

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) {
	return false;
}

... to this:

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ &&
    $(event.target).closest('.ui-dialog').zIndex() < $.ui.dialog.overlay.maxZ) {
	return false;
}

This makes the dialog continue to block events on items with a z-index lower than the topmost overlay, *but only if they are not a child element of a dialog which is above the overlay*.

Hopefully this will help anybody who's having the same problem. I'll work on submitting a fix to GitHub shortly.

comment:9 follow-up: ↓ 10 Changed 3 years ago by saulotoledo

I can confirm the problem and the fix suggested solved for me. The problem was found with http://bugs.jqueryui.com/ticket/7950

comment:10 in reply to: ↑ 9 Changed 2 years ago by may

Replying to saulotoledo:

I can confirm the problem and the fix suggested solved for me. The problem was found with http://bugs.jqueryui.com/ticket/7950

Yes the fix works for FF and IE, but not for Chrome. Anypne has any suggestion?

comment:11 Changed 22 months ago by scott.gonzalez

  • Milestone changed from TBD to 1.10.0

comment:12 Changed 22 months ago by petersendidit

  • Status changed from new to open
  • Summary changed from "modal" Dialog Incorrectly Cancels Input Events to Dialog: "modal" Dialog Incorrectly Cancels Input Events

comment:13 Changed 21 months ago by Nate Eagle

  • Status changed from open to closed
  • Resolution set to fixed

Dialog: Awesome new stacking and overlay implementation. Fixes the following tickets:

Fixes #3534 - Dialog: Modal dialog disables all input elements on page. Fixes #4671 - Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari. Fixes #4995 - Dialog: Modal Dialog's overlay dissapears in IE when content is tall. Fixes #5388 - Dialog: Don't change z-index when already at the top. Fixes #5466 - Dialog: "modal" Dialog Incorrectly Cancels Input Events. Fixes #5762 - Dialog: Get rid of z-index workaround, document it instead. Fixes #6267 - Dialog: checkboxes that inherit a z-index < jqueryui.dialog z-index don't work. Fixes #7051 - Dialog: modal prevents tab key from moving focus off slider handle. Fixes #7107 - Dialog: Modal dialog event loss with high zindex child elements (FF 3.6). Fixes #7120 - Dialog: Modal operation interrupts drag drop marker functionality on gmaps. Fixes #8172 - Dialog: Change event cancelled when opening modal dialog from another modal dialog. Fixes #8583 - Dialog: Mouse event wrongly stopped. Fixes #8722 - Dialog: Remove stack option. Fixes #8729 - Dialog: Remove zIndex option.

Changeset: 3829a37ca122e923c3a08b964c4b1a946a2a1456

Note: See TracTickets for help on using tickets.