From 6c9736b72d82d29023f1bb13112e0b389480842f Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Tue, 29 Oct 2024 18:29:01 +0700
Subject: [PATCH 1/2] fix: Unable to select payment option in the dropdown in
 expense preview in the main chat

---
 src/components/Hoverable/ActiveHoverable.tsx | 4 ++--
 src/pages/home/report/ReportActionItem.tsx   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx
index 9bc0e846aaf1..bf37378e3a0c 100644
--- a/src/components/Hoverable/ActiveHoverable.tsx
+++ b/src/components/Hoverable/ActiveHoverable.tsx
@@ -81,7 +81,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
             setIsHovered(false);
         };
 
-        document.addEventListener('mouseover', unsetHoveredIfOutside);
+        document.addEventListener('mouseover', unsetHoveredIfOutside, true);
 
         return () => document.removeEventListener('mouseover', unsetHoveredIfOutside);
     }, [isHovered, elementRef, shouldFreezeCapture]);
@@ -126,7 +126,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
         (event: MouseEvent) => {
             // Check if the blur event occurred due to clicking outside the element
             // and the wrapperView contains the element that caused the blur and reset isHovered
-            if (!elementRef.current?.contains(event.target as Node) && !elementRef.current?.contains(event.relatedTarget as Node)) {
+            if (!elementRef.current?.contains(event.target as Node) && !elementRef.current?.contains(event.relatedTarget as Node) && !shouldFreezeCapture) {
                 setIsHovered(false);
             }
 
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 0af9bd61120d..a0e2f65a89a0 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -961,6 +961,7 @@ function ReportActionItem({
             <Hoverable
                 shouldHandleScroll
                 isDisabled={draftMessage !== undefined}
+                shouldFreezeCapture={isPaymentMethodPopoverActive}
             >
                 {(hovered) => (
                     <View style={highlightedBackgroundColorIfNeeded}>

From 21fc562721afa1596f762d1f291dae769141013d Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Tue, 29 Oct 2024 18:45:14 +0700
Subject: [PATCH 2/2] fix: lint

---
 src/components/Hoverable/ActiveHoverable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx
index bf37378e3a0c..eda42a703d65 100644
--- a/src/components/Hoverable/ActiveHoverable.tsx
+++ b/src/components/Hoverable/ActiveHoverable.tsx
@@ -132,7 +132,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
 
             onBlur?.(event);
         },
-        [onBlur],
+        [onBlur, shouldFreezeCapture],
     );
 
     const handleAndForwardOnMouseMove = useCallback(