From 0d63abfa8b08bfa426d723b7055b74edd8285ca8 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 23 Oct 2024 09:37:12 +0200
Subject: [PATCH] feat(SW-552): poi stays active after list is toggled

---
 .../Map/DynamicMap/Sidebar/index.tsx          | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
index 33c511638..2e03bd466 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
@@ -24,6 +24,7 @@ export default function Sidebar({
   const intl = useIntl()
   const map = useMap()
   const [isFullScreenSidebar, setIsFullScreenSidebar] = useState(false)
+  const [isClicking, setIsClicking] = useState(false)
   const poiGroups = new Set(pointsOfInterest.map(({ group }) => group))
   const poisInGroups = Array.from(poiGroups).map((group) => ({
     group,
@@ -45,10 +46,26 @@ export default function Sidebar({
     }
   }
 
+  function handleMouseEnter(poiName: string) {
+    if (!isClicking) {
+      onActivePoiChange(poiName)
+    }
+  }
+
+  function handleMouseLeave() {
+    if (!isClicking) {
+      onActivePoiChange(null)
+    }
+  }
+
   function handlePoiClick(poiName: string, poiCoordinates: Coordinates) {
-    onActivePoiChange(activePoi === poiName ? null : poiName)
-    moveToPoi(poiCoordinates)
+    setIsClicking(true)
     toggleFullScreenSidebar()
+    onActivePoiChange(poiName)
+    moveToPoi(poiCoordinates)
+    setTimeout(() => {
+      setIsClicking(false)
+    }, 200)
   }
 
   return (
@@ -98,8 +115,8 @@ export default function Sidebar({
                   <li key={poi.name} className={styles.poiItem}>
                     <button
                       className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
-                      onMouseEnter={() => onActivePoiChange(poi.name)}
-                      onMouseLeave={() => onActivePoiChange(null)}
+                      onMouseEnter={() => handleMouseEnter(poi.name)}
+                      onMouseLeave={handleMouseLeave}
                       onClick={() => handlePoiClick(poi.name, poi.coordinates)}
                     >
                       <span>{poi.name}</span>