Search and Top Navigation
#7120 closed bug (fixed)
Opened March 16, 2011 10:22AM UTC
Closed October 24, 2012 09:05PM UTC
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).
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.
Attachments (0)
Change History (6)
Changed September 07, 2011 12:54PM UTC by comment:1
| keywords: | → modal |
|---|
Changed May 10, 2012 06:15PM UTC by comment:2
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.
Changed October 11, 2012 02:47PM UTC by comment:3
| milestone: | 1.9.0 → 1.10.0 |
|---|
Changed October 15, 2012 09:13PM UTC by comment:4
| status: | new → open |
|---|
I updated the jsbin to use the latest versions and issue is still there
Changed October 24, 2012 02:29AM UTC by comment:5
| summary: | Dialog - Modal operation interrupts drag drop marker functionality on gmaps → Dialog: Modal operation interrupts drag drop marker functionality on gmaps |
|---|
Changed October 24, 2012 09:05PM UTC by comment:6
| resolution: | → fixed |
|---|---|
| status: | open → closed |
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