Merge pull request #10490 from bepremeg/CK-240_RemoveSelectEventHandler

Select style multiple select interactions removed

src/ol/interaction/Select.js

@@ -167,6 +167,16 @@ class Select extends Interaction {
 
     const options = opt_options ? opt_options : {};
 
+    /**
+     * @private
+     */
+    this.boundAddFeature_ = this.addFeature_.bind(this);
+
+    /**
+     * @private
+     */
+    this.boundRemoveFeature_ = this.removeFeature_.bind(this);
+
     /**
      * @private
      * @type {import("../events/condition.js").Condition}
@@ -249,10 +259,6 @@ class Select extends Interaction {
      * @type {Object<string, import("../layer/Layer.js").default>}
      */
     this.featureLayerAssociation_ = {};
-
-    const features = this.getFeatures();
-    features.addEventListener(CollectionEventType.ADD, this.addFeature_.bind(this));
-    features.addEventListener(CollectionEventType.REMOVE, this.removeFeature_.bind(this));
   }
 
   /**
@@ -320,8 +326,16 @@ class Select extends Interaction {
       this.features_.forEach(this.restorePreviousStyle_.bind(this));
     }
     super.setMap(map);
-    if (map && this.style_) {
-      this.features_.forEach(this.applySelectedStyle_.bind(this));
+    if (map) {
+      this.features_.addEventListener(CollectionEventType.ADD, this.boundAddFeature_);
+      this.features_.addEventListener(CollectionEventType.REMOVE, this.boundRemoveFeature_);
+
+      if (this.style_) {
+        this.features_.forEach(this.applySelectedStyle_.bind(this));
+      }
+    } else {
+      this.features_.removeEventListener(CollectionEventType.ADD, this.boundAddFeature_);
+      this.features_.removeEventListener(CollectionEventType.REMOVE, this.boundRemoveFeature_);
     }
   }
 

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

@@ -9,6 +9,7 @@ import Interaction from '../../../../src/ol/interaction/Interaction.js';
 import Select from '../../../../src/ol/interaction/Select.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
+import Style from '../../../../src/ol/style/Style.js';
 
 
 describe('ol.interaction.Select', function() {
@@ -406,4 +407,53 @@ describe('ol.interaction.Select', function() {
     });
 
   });
+
+  describe('clear event listeners on interaction removal', function() {
+    let firstInteraction, secondInteraction, feature;
+
+    beforeEach(function() {
+      feature = source.getFeatures()[3]; // top feature is selected
+
+      const style = new Style({});
+      const features = new Collection();
+
+      firstInteraction = new Select({style, features});
+      secondInteraction = new Select({style, features});
+    });
+
+    afterEach(function() {
+      map.removeInteraction(secondInteraction);
+      map.removeInteraction(firstInteraction);
+    });
+
+    // The base case
+    describe('with a single interaction added', function() {
+      it('changes the selected feature once', function() {
+        map.addInteraction(firstInteraction);
+
+        const listenerSpy = sinon.spy();
+        feature.on('change', listenerSpy);
+
+        simulateEvent('singleclick', 10, -20, false);
+
+        expect(listenerSpy.callCount).to.be(1);
+      });
+    });
+
+    // The "difficult" case. To prevent regression
+    describe('with a replaced interaction', function() {
+      it('changes the selected feature once', function() {
+        map.addInteraction(firstInteraction);
+        map.removeInteraction(firstInteraction);
+        map.addInteraction(secondInteraction);
+
+        const listenerSpy = sinon.spy();
+        feature.on('change', listenerSpy);
+
+        simulateEvent('singleclick', 10, -20, false);
+
+        expect(listenerSpy.callCount).to.be(1);
+      });
+    });
+  });
 });