From 496b0db230e51f6e28f458775b1f4278316579a0 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 21 Nov 2024 16:30:24 +0100
Subject: [PATCH] fix(SW-960) close on click outside

---
 .../HotelCardDialogListing/index.tsx               |  2 +-
 .../HotelListingMapContent/index.tsx               | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/HotelReservation/HotelCardDialogListing/index.tsx b/components/HotelReservation/HotelCardDialogListing/index.tsx
index fe75c9b33..f13ff0433 100644
--- a/components/HotelReservation/HotelCardDialogListing/index.tsx
+++ b/components/HotelReservation/HotelCardDialogListing/index.tsx
@@ -60,7 +60,7 @@ export default function HotelCardDialogListing({
       const elements = document.querySelectorAll("[data-name]")
       setTimeout(() => {
         elements.forEach((el) => observerRef.current?.observe(el))
-      }, 500)
+      }, 1000)
     }
   }, [activeCard])
 
diff --git a/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx b/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
index ce9e95020..c1a3e8c01 100644
--- a/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
+++ b/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
@@ -2,10 +2,11 @@ import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
-import { useState } from "react"
+import { useRef, useState } from "react"
 
 import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import useClickOutside from "@/hooks/useClickOutside"
 
 import HotelMarker from "../../Markers/HotelMarker"
 
@@ -19,6 +20,7 @@ export default function HotelListingMapContent({
   onActiveHotelPinChange,
 }: HotelListingMapContentProps) {
   const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
 
   function toggleActiveHotelPin(pinName: string | null) {
     if (onActiveHotelPinChange) {
@@ -31,6 +33,10 @@ export default function HotelListingMapContent({
     return activeHotelPin === pinName || hoveredHotelPin === pinName
   }
 
+  useClickOutside(dialogRef, isPinActiveOrHovered(activeHotelPin ?? ""), () => {
+    toggleActiveHotelPin(null)
+  })
+
   return (
     <div>
       {hotelPins.map((pin) => {
@@ -44,13 +50,13 @@ export default function HotelListingMapContent({
             zIndex={isActiveOrHovered ? 2 : 0}
             onMouseEnter={() => setHoveredHotelPin(pin.name)}
             onMouseLeave={() => setHoveredHotelPin(null)}
-            onClick={() =>
+            onClick={() => {
               toggleActiveHotelPin(
                 activeHotelPin === pin.name ? null : pin.name
               )
-            }
+            }}
           >
-            <div className={styles.dialogContainer}>
+            <div className={styles.dialogContainer} ref={dialogRef}>
               <HotelCardDialog
                 isOpen={isActiveOrHovered}
                 handleClose={(event: { stopPropagation: () => void }) => {