Fix: unable to remove listener with layer(s) registered with Map#once

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### 🐞 Bug fixes
 
 - Heatmap Fix for 3D terrain ([#4571](https://github.com/maplibre/maplibre-gl-js/pull/4571))
+- Fix Map#off to not remove listener with layer(s) registered with Map#once ([#4592](https://github.com/maplibre/maplibre-gl-js/pull/4592))
 - _...Add new stuff here..._
 
 ## 4.6.0

src/ui/map.ts

@@ -343,9 +343,11 @@ export type CompleteMapOptions = Complete<MapOptions>;
 type DelegatedListener = {
     layers: string[];
     listener: Listener;
-    delegates: {[type in keyof MapEventType]?: (e: any) => void};
+    delegates: {[type in keyof MapEventType]?: Delegate};
 }
 
+type Delegate = (e: any) => void;
+
 const defaultMinZoom = -2;
 const defaultMaxZoom = 22;
 
@@ -1496,6 +1498,18 @@ export class Map extends Camera {
 
         const delegatedListener = this._createDelegatedListener(type, layerIds, listener);
 
+        for (const key in delegatedListener.delegates) {
+            const delegate: Delegate = delegatedListener.delegates[key];
+            delegatedListener.delegates[key] = (...args: Parameters<Delegate>) => {
+                this._removeDelegatedListener(type, layerIds, listener);
+                delegate(...args);
+            };
+        }
+
+        this._delegatedListeners = this._delegatedListeners || {};
+        this._delegatedListeners[type] = this._delegatedListeners[type] || [];
+        this._delegatedListeners[type].push(delegatedListener);
+
         for (const event in delegatedListener.delegates) {
             this.once(event, delegatedListener.delegates[event]);
         }

src/ui/map_tests/map_events.test.ts

@@ -434,6 +434,21 @@ describe('map events', () => {
         expect(spy).toHaveBeenCalledTimes(1);
     });
 
+    test('Map#off removes listener registered with Map#once', () => {
+        const map = createMap();
+
+        jest.spyOn(map, 'getLayer').mockReturnValue({} as StyleLayer);
+        jest.spyOn(map, 'queryRenderedFeatures').mockReturnValue([{} as MapGeoJSONFeature]);
+
+        const spy = jest.fn();
+
+        map.once('click', 'layer', spy);
+        map.off('click', 'layer', spy);
+        simulate.click(map.getCanvas());
+
+        expect(spy).not.toHaveBeenCalled();
+    });
+
     (['mouseenter', 'mouseover'] as (keyof MapLayerEventType)[]).forEach((event) => {
         test(`Map#on ${event} does not fire if the specified layer does not exist`, () => {
             const map = createMap();