Merge pull request #49750 from FitseTLT/fix-modal-shortcut-key-bug

Fix - Key Navigation - Pressing CTRL+K in attachment and closing search, leads to different chat
Expensify · Sep 27, 2024 · 0856034 · 0856034
2 parents 77e2fd9 + c9abc7a
commit 0856034
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 37 deletions.
diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts
@@ -32,9 +32,11 @@ function closeTop() {
     }
     if (onModalClose) {
         closeModals[closeModals.length - 1](isNavigate);
+        closeModals.pop();
         return;
     }
     closeModals[closeModals.length - 1]();
+    closeModals.pop();
 }
 
 /**

diff --git a/src/pages/TransactionReceiptPage.tsx b/src/pages/TransactionReceiptPage.tsx
@@ -1,7 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
@@ -13,19 +12,14 @@ import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import * as ReportActions from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {Report, ReportMetadata, Transaction} from '@src/types/onyx';
 
-type TransactionReceiptOnyxProps = {
-    report: OnyxEntry<Report>;
-    transaction: OnyxEntry<Transaction>;
-    reportMetadata: OnyxEntry<ReportMetadata>;
-};
+type TransactionReceiptProps = StackScreenProps<AuthScreensParamList, typeof SCREENS.TRANSACTION_RECEIPT>;
 
-type TransactionReceiptProps = TransactionReceiptOnyxProps & StackScreenProps<AuthScreensParamList, typeof SCREENS.TRANSACTION_RECEIPT>;
-
-function TransactionReceipt({transaction, report, reportMetadata = {isLoadingInitialReportActions: true}, route}: TransactionReceiptProps) {
+function TransactionReceipt({route}: TransactionReceiptProps) {
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`);
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${route.params.transactionID ?? '-1'}`);
+    const [reportMetadata = {isLoadingInitialReportActions: true}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID ?? '-1'}`);
     const receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(transaction);
 
     const imageSource = tryResolveUrlFromApiRoot(receiptURIs.image ?? '');
@@ -65,7 +59,7 @@ function TransactionReceipt({transaction, report, reportMetadata = {isLoadingIni
             originalFileName={receiptURIs?.filename}
             defaultOpen
             onModalClose={() => {
-                Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(report?.reportID ?? '-1'));
+                Navigation.dismissModal(report?.reportID ?? '-1');
             }}
             isLoading={!transaction && reportMetadata?.isLoadingInitialReportActions}
             shouldShowNotFoundPage={shouldShowNotFoundPage}
@@ -75,14 +69,4 @@ function TransactionReceipt({transaction, report, reportMetadata = {isLoadingIni
 
 TransactionReceipt.displayName = 'TransactionReceipt';
 
-export default withOnyx<TransactionReceiptProps, TransactionReceiptOnyxProps>({
-    report: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`,
-    },
-    transaction: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${route.params.transactionID ?? '-1'}`,
-    },
-    reportMetadata: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID ?? '-1'}`,
-    },
-})(TransactionReceipt);
+export default TransactionReceipt;
diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useCallback} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import type {Attachment} from '@components/Attachments/types';
@@ -19,14 +19,6 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
     const accountID = route.params.accountID;
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`);
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
-    const hasDismissedModalRef = useRef(false);
-
-    useEffect(
-        () => () => {
-            hasDismissedModalRef.current = false;
-        },
-        [],
-    );
 
     // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource
     const source = Number(route.params.source) || route.params.source;
@@ -48,10 +40,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
             report={report}
             source={source}
             onModalClose={() => {
-                if (!hasDismissedModalRef.current) {
-                    Navigation.dismissModal();
-                    hasDismissedModalRef.current = true;
-                }
+                Navigation.dismissModal();
                 // This enables Composer refocus when the attachments modal is closed by the browser navigation
                 ComposerFocusManager.setReadyToFocus();
             }}