fix(SW-415): Close on click on infoIcon

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { useRef, useState } from "react"
-import { Button, DialogTrigger } from "react-aria-components"
+import { Button } from "react-aria-components"
 
 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -26,6 +26,7 @@ export default function FlexibilityOption({
   const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   let triggerRef = useRef<HTMLButtonElement>(null)
+  const buttonClickedRef = useRef(false)
 
   function setRef(node: Element | null) {
     if (node) {
@@ -61,11 +62,13 @@ export default function FlexibilityOption({
   }
 
   function togglePopover() {
-    console.log("Toggle Popover called")
+    buttonClickedRef.current = !buttonClickedRef.current
-    setIsPopoverOpen((prevState) => !prevState)
+    setIsPopoverOpen(buttonClickedRef.current)
   }
 
-  console.log(isPopoverOpen)
+  function handlePopoverChange(isOpen: boolean) {
+    setIsPopoverOpen(isOpen)
+  }
 
   return (
     <label>
@@ -80,7 +83,9 @@ export default function FlexibilityOption({
           <Button
             aria-label="Help"
             className={styles.button}
-            onPress={togglePopover}
+            onPress={() => {
+              togglePopover()
+            }}
             ref={triggerRef}
           >
             <InfoCircleIcon
@@ -104,7 +109,7 @@ export default function FlexibilityOption({
             UNSTABLE_portalContainer={rootDiv}
             triggerRef={triggerRef}
             isOpen={isPopoverOpen}
-            onOpenChange={setIsPopoverOpen}
+            onOpenChange={handlePopoverChange}
           >
             <Caption
               color="uiTextHighContrast"