diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 4f88efa2d334..031f2f9ebbdf 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -637,7 +637,9 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD ); + // A flag to indicate whether the user choose to delete the transaction or not const isTransactionDeleted = useRef(false); + // Where to go back after deleting the transaction and its report. It's empty if the transaction report isn't deleted. const navigateBackToAfterDelete = useRef(); const deleteTransaction = useCallback(() => { @@ -750,10 +752,13 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD onConfirm={deleteTransaction} onCancel={() => setIsDeleteModalVisible(false)} onModalHide={() => { - if (isTransactionDeleted.current && !navigateBackToAfterDelete.current) { - Navigation.dismissModal(); - } else { - ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current); + // We use isTransactionDeleted to know if the modal hides because the user deletes the transaction. + if (isTransactionDeleted.current) { + if (!navigateBackToAfterDelete.current) { + Navigation.dismissModal(); + } else { + ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current); + } } }} prompt={caseID === CASES.DEFAULT ? translate('task.deleteConfirmation') : translate('iou.deleteConfirmation')}