Merge pull request #10502 from walkermatt/stopevent-removed-target

Stop events that originate with a removed target

src/ol/PluggableMap.js

@@ -932,13 +932,15 @@ class PluggableMap extends BaseObject {
       // coordinates so interactions cannot be used.
       return;
     }
-    let target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target);
+    const target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target);
     if (!mapBrowserEvent.dragging) {
-      while (target && target !== this.viewport_) {
-        if (target.parentElement === this.overlayContainerStopEvent_) {
-          return;
-        }
-        target = target.parentElement;
+      if (this.overlayContainerStopEvent_.contains(target) || !document.body.contains(target)) {
+        // Abort if the event target is a child of the container that doesn't allow
+        // event propagation or is no longer in the page. It's possible for the target to no longer
+        // be in the page if it has been removed in an event listener, this might happen in a Control
+        // that recreates it's content based on user interaction either manually or via a render
+        // in something like https://reactjs.org/
+        return;
       }
     }
     mapBrowserEvent.frameState = this.frameState_;

test/spec/ol/interaction/draw.test.js

@@ -15,7 +15,6 @@ import Polygon from '../../../../src/ol/geom/Polygon.js';
 import Draw, {createRegularPolygon, createBox} from '../../../../src/ol/interaction/Draw.js';
 import Interaction from '../../../../src/ol/interaction/Interaction.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
-import Event from '../../../../src/ol/events/Event.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import {clearUserProjection, setUserProjection, transform} from '../../../../src/ol/proj.js';
 import {register} from '../../../../src/ol/proj/proj4.js';
@@ -73,8 +72,9 @@ describe('ol.interaction.Draw', function() {
     // calculated in case body has top < 0 (test runner with small window)
     const position = viewport.getBoundingClientRect();
     const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false;
-    const event = new Event();
+    const event = {};
     event.type = type;
+    event.target = viewport.firstChild;
     event.clientX = position.left + x + width / 2;
     event.clientY = position.top + y + height / 2;
     event.shiftKey = shiftKey;

test/spec/ol/interaction/extent.test.js

@@ -2,7 +2,6 @@ import Map from '../../../../src/ol/Map.js';
 import MapBrowserPointerEvent from '../../../../src/ol/MapBrowserPointerEvent.js';
 import View from '../../../../src/ol/View.js';
 import ExtentInteraction from '../../../../src/ol/interaction/Extent.js';
-import Event from '../../../../src/ol/events/Event.js';
 
 describe('ol.interaction.Extent', function() {
   let map, interaction;
@@ -50,8 +49,9 @@ describe('ol.interaction.Extent', function() {
     // calculated in case body has top < 0 (test runner with small window)
     const position = viewport.getBoundingClientRect();
     const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false;
-    const pointerEvent = new Event();
+    const pointerEvent = {};
     pointerEvent.type = type;
+    pointerEvent.target = viewport.firstChild;
     pointerEvent.button = button;
     pointerEvent.clientX = position.left + x + width / 2;
     pointerEvent.clientY = position.top - y + height / 2;

test/spec/ol/interaction/modify.test.js

@@ -84,6 +84,7 @@ describe('ol.interaction.Modify', function() {
     const position = viewport.getBoundingClientRect();
     const pointerEvent = new Event();
     pointerEvent.type = type;
+    pointerEvent.target = viewport.firstChild;
     pointerEvent.clientX = position.left + x + width / 2;
     pointerEvent.clientY = position.top + y + height / 2;
     pointerEvent.shiftKey = modifiers.shift || false;

test/spec/ol/interaction/select.test.js

@@ -91,11 +91,13 @@ describe('ol.interaction.Select', function() {
     // calculated in case body has top < 0 (test runner with small window)
     const position = viewport.getBoundingClientRect();
     const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false;
-    const event = new PointerEvent(type, {
+    const event = {
+      type: type,
+      target: viewport.firstChild,
       clientX: position.left + x + width / 2,
       clientY: position.top + y + height / 2,
       shiftKey: shiftKey
-    });
+    };
     map.handleMapBrowserEvent(new MapBrowserPointerEvent(type, map, event));
   }
 

test/spec/ol/interaction/translate.test.js

@@ -65,13 +65,15 @@ describe('ol.interaction.Translate', function() {
     // calculated in case body has top < 0 (test runner with small window)
     const position = viewport.getBoundingClientRect();
     const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false;
-    const event = new MapBrowserPointerEvent(type, map,
-      new PointerEvent(type, {
-        clientX: position.left + x + width / 2,
-        clientY: position.top + y + height / 2,
-        shiftKey: shiftKey,
-        preventDefault: function() {}
-      }));
+    const event = new MapBrowserPointerEvent(type, map, {
+      type: type,
+      target: viewport.firstChild,
+      pointerId: 0,
+      clientX: position.left + x + width / 2,
+      clientY: position.top + y + height / 2,
+      shiftKey: shiftKey,
+      preventDefault: function() {}
+    });
     map.handleMapBrowserEvent(event);
   }