fix: Clear Event Listeners On Unmount (#851)

bcgov · Jan 6, 2025 · 6ef5734 · 6ef5734
1 parent 4445d65
commit 6ef5734
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/frontend/src/app/components/mapping/leaflet-map-with-server-side-clustering.tsx b/frontend/src/app/components/mapping/leaflet-map-with-server-side-clustering.tsx
@@ -69,8 +69,8 @@ const LeafletMapWithServerSideClustering: React.FC<MapProps> = ({
           ),
         );
 
-        // Fit the map to the bounds
-        mapRef?.current?.fitBounds(bounds, { padding: [35, 35] });
+        // Fit the map to the bounds. Disable animation due to known Leaflet issue if map unmounts while animating: https://github.com/Leaflet/Leaflet/issues/9527
+        mapRef?.current?.flyToBounds(bounds, { padding: [35, 35], animate: false });
       } else if (defaultClusterView.center && defaultClusterView.zoom) {
         mapRef?.current?.setView(defaultClusterView.center, defaultClusterView.zoom);
       }

diff --git a/frontend/src/app/components/mapping/spiderfy.tsx b/frontend/src/app/components/mapping/spiderfy.tsx
@@ -55,6 +55,14 @@ const Spiderfy = (props: SpiderfyProps) => {
     });
   }, [oms, props]);
 
+  useEffect(() => {
+    return () => {
+      oms.clearListeners("spiderfy");
+      oms.clearListeners("unspiderfy");
+      oms.clearListeners("click");
+    };
+  }, [oms]);
+
   useEffect(() => {
     map.eachLayer((layer) => {
       // Hacky, but "RiseOnHover" is being used to identify non-clustered markers that should be spiderfied.