Merge pull request #33203 from tsa321/seashortc-drconfirm

Fix cannot open search page by shortcut if delete receipt confirm modal is visible
Expensify · Jan 25, 2024 · bba406b · bba406b
2 parents e6988ca + dd7a6f1
commit bba406b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
@@ -177,7 +177,7 @@ function BaseModal(
             onBackdropPress={handleBackdropPress}
             // Note: Escape key on web/desktop will trigger onBackButtonPress callback
             // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            onBackButtonPress={onClose}
+            onBackButtonPress={Modal.closeTop}
             onModalShow={handleShowModal}
             propagateSwipe={propagateSwipe}
             onModalHide={hideModal}

diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx
@@ -71,7 +71,7 @@ function ThreeDotsMenu({
     const theme = useTheme();
     const styles = useThemeStyles();
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
-    const buttonRef = useRef(null);
+    const buttonRef = useRef<HTMLDivElement | null>(null);
     const {translate} = useLocalize();
 
     const showPopoverMenu = () => {
@@ -92,6 +92,7 @@ function ThreeDotsMenu({
                                 hidePopoverMenu();
                                 return;
                             }
+                            buttonRef.current?.blur();
                             showPopoverMenu();
                             if (onIconPress) {
                                 onIconPress();

diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts
@@ -1,9 +1,10 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 
-const closeModals: Array<(isNavigating: boolean) => void> = [];
+const closeModals: Array<(isNavigating?: boolean) => void> = [];
 
 let onModalClose: null | (() => void);
+let isNavigate: undefined | boolean;
 
 /**
  * Allows other parts of the app to call modal close function
@@ -21,6 +22,20 @@ function setCloseModal(onClose: () => void) {
     };
 }
 
+/**
+ * Close topmost modal
+ */
+function closeTop() {
+    if (closeModals.length === 0) {
+        return;
+    }
+    if (onModalClose) {
+        closeModals[closeModals.length - 1](isNavigate);
+        return;
+    }
+    closeModals[closeModals.length - 1]();
+}
+
 /**
  * Close modal in other parts of the app
  */
@@ -30,17 +45,21 @@ function close(onModalCloseCallback: () => void, isNavigating = true) {
         return;
     }
     onModalClose = onModalCloseCallback;
-    [...closeModals].reverse().forEach((onClose) => {
-        onClose(isNavigating);
-    });
+    isNavigate = isNavigating;
+    closeTop();
 }
 
 function onModalDidClose() {
     if (!onModalClose) {
         return;
     }
+    if (closeModals.length) {
+        closeTop();
+        return;
+    }
     onModalClose();
     onModalClose = null;
+    isNavigate = undefined;
 }
 
 /**
@@ -58,4 +77,4 @@ function willAlertModalBecomeVisible(isVisible: boolean) {
     Onyx.merge(ONYXKEYS.MODAL, {willAlertModalBecomeVisible: isVisible});
 }
 
-export {setCloseModal, close, onModalDidClose, setModalVisibility, willAlertModalBecomeVisible};
+export {setCloseModal, close, onModalDidClose, setModalVisibility, willAlertModalBecomeVisible, closeTop};