From 5d7f7dbf515dacc809a3bacafa5f20755e126afb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maximilian.kroeg@geocept.com>
Date: Thu, 15 Jul 2021 11:52:56 +0200
Subject: [PATCH 1/2] Add test for subcontrol added during map contruction

---
 test/browser/spec/ol/map.test.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/test/browser/spec/ol/map.test.js b/test/browser/spec/ol/map.test.js
index 51deb0d674..d6c9001cbe 100644
--- a/test/browser/spec/ol/map.test.js
+++ b/test/browser/spec/ol/map.test.js
@@ -1,3 +1,4 @@
+import Control from '../../../../src/ol/control/Control.js';
 import DoubleClickZoom from '../../../../src/ol/interaction/DoubleClickZoom.js';
 import DragPan from '../../../../src/ol/interaction/DragPan.js';
 import Feature from '../../../../src/ol/Feature.js';
@@ -66,6 +67,35 @@ describe('ol.Map', function () {
       const containerStop = map.getOverlayContainerStopEvent();
       expect(containerStop.className).to.be('ol-overlaycontainer-stopevent');
     });
+
+    it('calls setMap for controls added by other controls', function () {
+      let subSetMapCalled = false;
+      class SubControl extends Control {
+        setMap(map) {
+          super.setMap(map);
+          subSetMapCalled = true;
+        }
+      }
+      class MainControl extends Control {
+        setMap(map) {
+          super.setMap(map);
+          map.addControl(
+            new SubControl({
+              element: document.createElement('div'),
+            })
+          );
+        }
+      }
+      new Map({
+        target: document.createElement('div'),
+        controls: [
+          new MainControl({
+            element: document.createElement('div'),
+          }),
+        ],
+      });
+      expect(subSetMapCalled).to.be(true);
+    });
   });
 
   describe('#addLayer()', function () {

From 8f8027c33a3d4c7387c52aa7bd17112060d1d331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maximilian.kroeg@geocept.com>
Date: Mon, 12 Jul 2021 13:49:08 +0200
Subject: [PATCH 2/2] Fix adding controls with map config

If a control like ol.control.Bar adds sub controls when added to a map
it fails during map creating because the listeners are added after the control
was added to the map.
---
 src/ol/PluggableMap.js | 44 +++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js
index 72547772d3..a7da6c0dde 100644
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -383,16 +383,6 @@ class PluggableMap extends BaseObject {
     // is "defined" already.
     this.setProperties(optionsInternal.values);
 
-    this.controls.forEach(
-      /**
-       * @param {import("./control/Control.js").default} control Control.
-       * @this {PluggableMap}
-       */
-      function (control) {
-        control.setMap(this);
-      }.bind(this)
-    );
-
     this.controls.addEventListener(
       CollectionEventType.ADD,
       /**
@@ -413,16 +403,6 @@ class PluggableMap extends BaseObject {
       }.bind(this)
     );
 
-    this.interactions.forEach(
-      /**
-       * @param {import("./interaction/Interaction.js").default} interaction Interaction.
-       * @this {PluggableMap}
-       */
-      function (interaction) {
-        interaction.setMap(this);
-      }.bind(this)
-    );
-
     this.interactions.addEventListener(
       CollectionEventType.ADD,
       /**
@@ -443,8 +423,6 @@ class PluggableMap extends BaseObject {
       }.bind(this)
     );
 
-    this.overlays_.forEach(this.addOverlayInternal_.bind(this));
-
     this.overlays_.addEventListener(
       CollectionEventType.ADD,
       /**
@@ -473,6 +451,28 @@ class PluggableMap extends BaseObject {
         event.element.setMap(null);
       }.bind(this)
     );
+
+    this.controls.forEach(
+      /**
+       * @param {import("./control/Control.js").default} control Control.
+       * @this {PluggableMap}
+       */
+      function (control) {
+        control.setMap(this);
+      }.bind(this)
+    );
+
+    this.interactions.forEach(
+      /**
+       * @param {import("./interaction/Interaction.js").default} interaction Interaction.
+       * @this {PluggableMap}
+       */
+      function (interaction) {
+        interaction.setMap(this);
+      }.bind(this)
+    );
+
+    this.overlays_.forEach(this.addOverlayInternal_.bind(this));
   }
 
   /**