Dialog: Modal operation interrupts drag drop marker functionality on gmaps

[dutts]

This was originally discovered while developing on jQuery 1.4.2 but can be reproduced using the latest jQuery.

When embedding a google map in a jQuery dialog, draggable markers cannot be dropped if the dialog is modal. See the following example (ignore the gmaps API error), observe that changing the modal setting to false on the dialog resumes correct behaviour). ​http://jsbin.com/upofa4/3

I am guessing that in the code which implements dialog modality, mouse events are being intercepted and then only forwarded to the modal window contents, but the mouseUp event isn't being fed through.

[adurante]

I think this ​line causes the problem. It captures a bunch of events (focus,mousedown,mouseup,keydown,keypress,click) at the document object and prevents the propagation of those whose target element has a z-index lower than the max overlay z-index. Since google maps uses divs with low z-index values to render its elements (including markers), the mousedown event is not received by the map because the marker usually has a z-index lower than the max overlay z-index. A workaround for this problem is to replace the if statement at line 706 by the following code:

var parentWidget = $( event.target ).closest('.ui-widget');
if ( parentWidget.size() && parentWidget.zIndex() < $.ui.dialog.overlay.maxZ){
	return false;
} else if (parentWidget.size() == 0 &&  $( event.target ).zIndex() < $.ui.dialog.overlay.maxZ ) {
	return false;
}

Basically, if the target element is inside a UI widget, consider the z-index of that widget instead of the z-index of the target element. It may not be the desired behaviour for some specific situations but at least it solves the google maps problem. Sorry for the grammar.

[drewkimrey]

I updated the jsbin to use the latest versions and issue is still there ​http://jsbin.com/upofa4/6/edit

[Nate Eagle]

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