fix: clicking a loo after performing a search (#1296)

application due to conflict btwn search and loo lat/lng. fx inf loop on search

src/components/LooMap/LooMap.tsx

@@ -144,13 +144,6 @@ const LooMap: React.FC<LooMapProps> = ({
     setHydratedToilets(loadedLooValues);
   }, [loadedToilets, mapState.loadedGroups]);
 
-  // Override the map location with the search result if present.
-  useEffect(() => {
-    if (mapState?.searchLocation && mapState?.map) {
-      mapState.map.setView(mapState.searchLocation);
-    }
-  }, [mapState.map, mapState.searchLocation]);
-
   // Begin location service initialisation.
   const onLocationFound = useCallback(
     (event: { latitude: any; longitude: any }) => {
@@ -186,11 +179,14 @@ const LooMap: React.FC<LooMapProps> = ({
     });
   }, [mapState.map, isActive, setMapState, startLocate, stopLocate]);
 
+  // Override the map location with the search result if present.
   useEffect(() => {
     if (mapState?.searchLocation && mapState?.map) {
       mapState.map.setView(mapState.searchLocation);
     }
-  }, [mapState.map, mapState.searchLocation]);
+    // Only update the map when the search location changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mapState.searchLocation]);
 
   return (
     <Box

src/components/LooMap/Markers.tsx

@@ -110,10 +110,14 @@ const MarkerGroup: React.FC<{
         }
       )
         .on('click', () => {
+          // Clear the current search upon navigation
+          setMapState({ searchLocation: undefined });
           router.push(`/loos/${toilet.id}`);
         })
         .on('keydown', (event: { originalEvent: { keyCode: number } }) => {
           if (event.originalEvent.keyCode === KEY_ENTER) {
+            // Clear the current search upon navigation
+            setMapState({ searchLocation: undefined });
             router.push(`/loos/${toilet.id}`);
           }
         });
@@ -122,7 +126,7 @@ const MarkerGroup: React.FC<{
       marker.getElement()?.setAttribute('aria-label', 'Public Toilet');
       return marker;
     },
-    [mapState.focus, router]
+    [mapState?.focus?.id, router, setMapState]
   );
 
   const [appliedFilterTypes, setAppliedFilterTypes] = useState<