#4268 fix async race when adding/removing geolocate rapidly

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Fix lag on fast map zoom ([#4366](https://github.com/maplibre/maplibre-gl-js/pull/4366))
 - Fix unguarded read access to possibly undefined object ([#4431](https://github.com/maplibre/maplibre-gl-js/pull/4431))
 - Fix remove hash string when map is removed ([#4427](https://github.com/maplibre/maplibre-gl-js/pull/4427))
+- Fix GeolocateControl may be added twice when calling addControl/removeControl/addControl rapidly ([#4454](https://github.com/maplibre/maplibre-gl-js/pull/4454))
 - Fix `style.loadURL` abort error being logged when removing style ([#4425](https://github.com/maplibre/maplibre-gl-js/pull/4425))
 - _...Add new stuff here..._
 

src/ui/control/geolocate_control.ts

@@ -281,7 +281,8 @@ export class GeolocateControl extends Evented implements IControl {
     onAdd(map: Map) {
         this._map = map;
         this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
-        checkGeolocationSupport().then((supported) => this._setupUI(supported));
+        this._setupUI();
+        checkGeolocationSupport().then((supported) => this._finishSetupUI(supported));
         return this._container;
     }
 
@@ -523,8 +524,7 @@ export class GeolocateControl extends Evented implements IControl {
         this._timeoutId = undefined;
     };
 
-    _setupUI = (supported: boolean) => {
-        // this method is called asynchronously during onAdd
+    _setupUI = () => {
         // the control could have been removed before reaching here
         if (!this._map) {
             return;
@@ -534,6 +534,15 @@ export class GeolocateControl extends Evented implements IControl {
         this._geolocateButton = DOM.create('button', 'maplibregl-ctrl-geolocate', this._container);
         DOM.create('span', 'maplibregl-ctrl-icon', this._geolocateButton).setAttribute('aria-hidden', 'true');
         this._geolocateButton.type = 'button';
+        this._geolocateButton.disabled = true;
+    };
+
+    _finishSetupUI = (supported: boolean) => {
+        // this method is called asynchronously during onAdd
+        if (!this._map) {
+            // control has since been removed
+            return;
+        }
 
         if (supported === false) {
             warnOnce('Geolocation support is not available so the GeolocateControl will be disabled.');
@@ -543,6 +552,7 @@ export class GeolocateControl extends Evented implements IControl {
             this._geolocateButton.setAttribute('aria-label', title);
         } else {
             const title = this._map._getUIString('GeolocateControl.FindMyLocation');
+            this._geolocateButton.disabled = false;
             this._geolocateButton.title = title;
             this._geolocateButton.setAttribute('aria-label', title);
         }

test/integration/browser/browser.test.ts

@@ -447,4 +447,19 @@ describe('Browser tests', () => {
         expect(center.lng).toBeCloseTo(11.39770);
         expect(center.lat).toBeCloseTo(47.29960);
     }, 20000);
+
+    test('Geolocate control should appear only once', async () => {
+        await page.evaluate(async () => {
+            const geolocateControl = new maplibregl.GeolocateControl({});
+
+            map.addControl(geolocateControl);
+            map.removeControl(geolocateControl);
+            map.addControl(geolocateControl);
+
+            await map.once('idle');
+        });
+
+        const geolocateUIelem = await page.$$('.maplibregl-ctrl-geolocate');
+        expect(geolocateUIelem).toHaveLength(1);
+    }, 20000);
 });