feat(SW-552): poi stays active after list is toggled

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)
+    setIsClicking(true)
-    moveToPoi(poiCoordinates)
     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)}
+                      onMouseEnter={() => handleMouseEnter(poi.name)}
-                      onMouseLeave={() => onActivePoiChange(null)}
+                      onMouseLeave={handleMouseLeave}
                       onClick={() => handlePoiClick(poi.name, poi.coordinates)}
                     >
                       <span>{poi.name}</span>