diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx index 2edffdd89..4c5f8ea7d 100644 --- a/src/components/LooMap/LooMap.tsx +++ b/src/components/LooMap/LooMap.tsx @@ -144,13 +144,6 @@ const LooMap: React.FC = ({ 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 = ({ }); }, [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 ( { + // 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<