Merge pull request #51645 from truph01/fix/51016-unable-to-select-pay…

…ment-option fix: Unable to select payment option in the dropdown in expense preview in the main chat
Expensify · Oct 30, 2024 · eb7c813 · eb7c813
2 parents 96a9af4 + 21fc562
commit eb7c813
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git 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,13 +126,13 @@ 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);
             }
 
             onBlur?.(event);
         },
-        [onBlur],
+        [onBlur, shouldFreezeCapture],
     );
 
     const handleAndForwardOnMouseMove = useCallback(

diff --git 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}>