Fix: Reports RHP briefly opens then closes when accessing expense details

src/components/Search/index.tsx

@@ -98,6 +98,8 @@ type SearchProps = {
     onDEWModalOpen?: () => void;
 };
 
+const hashToString = (queryHash?: number) => (queryHash || queryHash === 0 ? String(queryHash) : undefined);
+
 function mapTransactionItemToSelectedEntry(
     item: TransactionListItemType,
     itemTransaction: OnyxEntry<Transaction>,
@@ -542,9 +544,7 @@ function Search({
         if (!validGroupBy) {
             return [];
         }
-        return (baseFilteredData as TransactionGroupListItemType[])
-            .map((item) => (item.transactionsQueryJSON?.hash ? String(item.transactionsQueryJSON.hash) : undefined))
-            .filter((hashValue): hashValue is string => !!hashValue);
+        return (baseFilteredData as TransactionGroupListItemType[]).map((item) => hashToString(item.transactionsQueryJSON?.hash)).filter((hashValue): hashValue is string => !!hashValue);
     }, [validGroupBy, baseFilteredData]);
 
     const groupByTransactionSnapshots = useMultipleSnapshots(groupByTransactionHashes);
@@ -555,7 +555,7 @@ function Search({
         }
 
         const enriched = (baseFilteredData as TransactionGroupListItemType[]).map((item) => {
-            const snapshot = item.transactionsQueryJSON?.hash ? groupByTransactionSnapshots[String(item.transactionsQueryJSON.hash)] : undefined;
+            const snapshot = groupByTransactionSnapshots[hashToString(item.transactionsQueryJSON?.hash) ?? ''];
             if (!snapshot?.data) {
                 return item;
             }

src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx

@@ -17,11 +17,15 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import {getReportAction} from '@libs/ReportActionsUtils';
+import {getReportOrDraftReport} from '@libs/ReportUtils';
 import {createAndOpenSearchTransactionThread, getColumnsToShow, getTableMinWidth} from '@libs/SearchUIUtils';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import {getTransactionViolations} from '@libs/TransactionUtils';
+import type {TransactionPreviewData} from '@userActions/Search';
 import {setActiveTransactionIDs} from '@userActions/TransactionThreadNavigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -33,6 +37,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
     showTooltip,
     canSelectMultiple,
     onCheckboxPress,
+    onSelectRow,
     columns,
     groupBy,
     accountID,
@@ -57,6 +62,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
     const [isMobileSelectionModeEnabled] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [visibleColumns] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: columnsSelector});
+    const [allTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION);
 
     const transactionsSnapshotMetadata = transactionsSnapshot?.search;
 
@@ -90,6 +96,21 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
     const dateColumnSize = shouldShowYearForSomeTransaction ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
 
     const {markReportIDAsExpense} = useWideRHPActions();
+    const selectRow = onSelectRow as (item: TItem, transactionPreviewData?: TransactionPreviewData) => void;
+    const getTransactionPreviewData = (transactionItem: TransactionListItemType): TransactionPreviewData => {
+        const parentReportAction = getReportAction(transactionItem?.reportID, transactionItem?.reportAction?.reportActionID);
+        const parentReport = getReportOrDraftReport(transactionItem?.reportID);
+        const transactionThreadReport = getReportOrDraftReport(transactionItem?.reportAction?.childReportID);
+        const transaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transactionItem?.transactionID)}`];
+
+        return {
+            hasParentReport: !!parentReport,
+            hasTransaction: !!transaction,
+            hasParentReportAction: !!parentReportAction,
+            hasTransactionThreadReport: !!transactionThreadReport,
+        };
+    };
+
     const openReportInRHP = (transactionItem: TransactionListItemType) => {
         const backTo = Navigation.getActiveRoute();
         const reportID = getReportIDForTransaction(transactionItem, transactionItem?.reportAction?.childReportID);
@@ -112,7 +133,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
 
         // The arrow navigation in RHP is only allowed for group-by:reports
         if (!isExpenseReportType) {
-            navigateToTransactionThread();
+            selectRow(transactionItem as unknown as TItem, getTransactionPreviewData(transactionItem));
             return;
         }
 

src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx

@@ -484,6 +484,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
                                 showTooltip={showTooltip}
                                 canSelectMultiple={canSelectMultiple}
                                 onCheckboxPress={onCheckboxPress}
+                                onSelectRow={onSelectRow}
                                 columns={columns}
                                 groupBy={groupBy}
                                 accountID={currentUserDetails.accountID}

src/components/SelectionListWithSections/types.ts

@@ -749,7 +749,7 @@ type TransactionGroupListItemProps<TItem extends ListItem> = ListItemProps<TItem
 
 type TransactionGroupListExpandedProps<TItem extends ListItem> = Pick<
     TransactionGroupListItemProps<TItem>,
-    'showTooltip' | 'canSelectMultiple' | 'onCheckboxPress' | 'columns' | 'groupBy' | 'accountID' | 'isOffline' | 'violations'
+    'showTooltip' | 'canSelectMultiple' | 'onCheckboxPress' | 'onSelectRow' | 'columns' | 'groupBy' | 'accountID' | 'isOffline' | 'violations'
 > & {
     transactions: TransactionListItemType[];
     transactionsVisibleLimit: number;