From 36f8d8a08189bd9643096d49267858f496342d5c Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Sat, 27 Jul 2024 16:34:14 +0700
Subject: [PATCH] fix: remove popstate listener in popover

avoid auto-dismissal issue in some browser
---
 src/components/Popover/index.tsx               |  7 +++++--
 src/components/Popover/types.ts                |  4 ++--
 src/components/ProcessMoneyRequestHoldMenu.tsx | 12 +++++++++++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
index 47486fd32791..ebf30d773f09 100644
--- a/src/components/Popover/index.tsx
+++ b/src/components/Popover/index.tsx
@@ -27,6 +27,7 @@ function Popover(props: PopoverProps) {
         anchorRef = () => {},
         animationIn = 'fadeIn',
         animationOut = 'fadeOut',
+        shouldCloseWhenBrowserNavigationChanged = true,
     } = props;
 
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -36,18 +37,20 @@ function Popover(props: PopoverProps) {
     // Not adding this inside the PopoverProvider
     // because this is an issue on smaller screens as well.
     React.useEffect(() => {
+        if (!shouldCloseWhenBrowserNavigationChanged) {
+            return;
+        }
         const listener = () => {
             if (!isVisible) {
                 return;
             }
-
             onClose();
         };
         window.addEventListener('popstate', listener);
         return () => {
             window.removeEventListener('popstate', listener);
         };
-    }, [onClose, isVisible]);
+    }, [onClose, isVisible, shouldCloseWhenBrowserNavigationChanged]);
 
     const onCloseWithPopoverContext = () => {
         if (popover && 'current' in anchorRef) {
diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts
index 4e2f38293f6e..1db09d0b2f9f 100644
--- a/src/components/Popover/types.ts
+++ b/src/components/Popover/types.ts
@@ -38,8 +38,8 @@ type PopoverProps = BaseModalProps &
         /** Whether we want to show the popover on the right side of the screen */
         fromSidebarMediumScreen?: boolean;
 
-        /** Whether handle navigation back when modal show. */
-        shouldHandleNavigationBack?: boolean;
+        /** Whether we should close when browser navigation change. This doesn't affect native platform */
+        shouldCloseWhenBrowserNavigationChanged?: boolean;
     };
 
 type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index 5860791818c4..bb76ea0290f3 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -1,4 +1,5 @@
-import React, {useRef} from 'react';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -31,6 +32,14 @@ function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosit
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const popoverRef = useRef(null);
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        const unsub = navigation.addListener('beforeRemove', () => {
+            onClose();
+        });
+        return unsub;
+    }, [navigation, onClose]);
 
     return (
         <Popover
@@ -41,6 +50,7 @@ function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosit
             anchorAlignment={anchorAlignment}
             disableAnimation={false}
             withoutOverlay={false}
+            shouldCloseWhenBrowserNavigationChanged={false}
         >
             <View style={[styles.mh5, styles.mv5]}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>