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

src/components/Search/index.tsx

@@ -99,6 +99,8 @@ type SearchProps = {
     onDEWModalOpen?: () => void;
 };
 
+const hashToString = (queryHash?: number) => (queryHash || queryHash === 0 ? String(queryHash) : undefined);
+
 function mapTransactionItemToSelectedEntry(
     item: TransactionListItemType,
     itemTransaction: OnyxEntry<Transaction>,
@@ -499,9 +501,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);
@@ -512,7 +512,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

@@ -19,8 +19,11 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 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 {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';
@@ -32,6 +35,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
     showTooltip,
     canSelectMultiple,
     onCheckboxPress,
+    onSelectRow,
     columns,
     groupBy,
     accountID,
@@ -89,6 +93,20 @@ 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);
+
+        return {
+            hasParentReport: !!parentReport,
+            hasTransaction: !!transactionItem,
+            hasParentReportAction: !!parentReportAction,
+            hasTransactionThreadReport: !!transactionThreadReport,
+        };
+    };
+
     const openReportInRHP = (transactionItem: TransactionListItemType) => {
         const backTo = Navigation.getActiveRoute();
         const reportID = getReportIDForTransaction(transactionItem, transactionItem?.reportAction?.childReportID);
@@ -111,7 +129,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

@@ -735,7 +735,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;