Opened 8 years ago

Closed 7 years ago

#7120 closed bug (fixed)

Dialog: Modal operation interrupts drag drop marker functionality on gmaps

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

Description

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.

Change History (6)

comment:1 Changed 8 years ago by Scott González

Keywords: modal added

comment:2 Changed 7 years ago by 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.

comment:3 Changed 7 years ago by Scott González

Milestone: 1.9.01.10.0

comment:4 Changed 7 years ago by drewkimrey

Status: newopen

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

comment:5 Changed 7 years ago by Jörn Zaefferer

Summary: Dialog - Modal operation interrupts drag drop marker functionality on gmapsDialog: Modal operation interrupts drag drop marker functionality on gmaps

comment:6 Changed 7 years ago by Nate Eagle

Resolution: fixed
Status: openclosed

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.