[$250] Nested table rows no longer highlight on hover or open expense in RHP on click

[MelvinBot]

Nested table rows in the report view no longer highlight on hover, and clicking the row no longer opens the expense in the RHP. Users must now click the > chevron tap area exactly to open the expense.

This is a regression likely introduced by the compact table styles update (#86283).

Parent issue: #86102
Related draft PR: #88296

Slack thread: https://expensify.slack.com/archives/C07NMDKEFMH/p1776703628974419

Issue Owner

Current Issue Owner: @bernhardoj

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022047750625313147857
• Upwork Job ID: 2047750625313147857
• Last Price Increase: 2026-04-24

[luacmartins]

@MelvinBot find the root cause of the issue

[MelvinBot]

Proposal

Problem

On large screens, nested transaction rows inside expanded expense reports are not interactive — no hover highlight and no click-to-open.

Solution

The root cause is in TransactionGroupListExpanded.tsx:263-285. The PressableWithFeedback wrapper that provides both the onPress handler (to open the expense in RHP via handleOnPress) and the hoverStyle is only applied when !isLargeScreenWidth:

{!isLargeScreenWidth ? (
    <PressableWithFeedback
        onPress={() => handleOnPress(transaction)}
        hoverStyle={[!transaction.isDisabled && styles.hoveredComponentBG]}
        ...
    >
        {transactionRow}
    </PressableWithFeedback>
) : (
    transactionRow   // ← bare row, no press handler, no hover style
)}

On large screens, transactionRow is rendered without any pressable wrapper. The only clickable element is the tiny ArrowRight chevron icon inside TransactionItemRow/index.tsx:895-912.

Fix: Remove the !isLargeScreenWidth conditional and wrap transactionRow in PressableWithFeedback on all screen sizes (lines 263-285). The same onPress, onLongPress, and hoverStyle props should apply regardless of viewport width.

Supporting evidence

• Parent report rows work correctly because they render through BaseListItem, which always wraps content in PressableWithFeedback — see ExpenseReportListItem.tsx:257.
• The handleOnPress function at line 186 calls openReportInRHP(transaction) which is the expected behavior for clicking a nested row — but this code path is unreachable on large screens.
• PR Add compact UI styles for search reports and expenses tables  #86283 introduced these compact table styles and this conditional rendering pattern.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Current assignee @Krishna2323 is eligible for the External assigner, not assigning anyone new.

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In search results grouped by report (or card/tag), when a group is expanded on wide desktop layouts, the nested transaction rows no longer react to hover (no background highlight) and clicking on the row body no longer opens the expense in the RHP. The only area that still works is the narrow > chevron tap target at the end of the row.

What is the root cause of that problem?

The nested rows for an expanded group are rendered by TransactionGroupListExpanded in the expense list. The row is wrapped in a pressable only in the narrow-layout branch; the wide-layout branch returns the bare TransactionItemRow with no outer pressable:

App/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx

Lines 268 to 286 in 50270ae

	{!isLargeScreenWidth ? (
	<PressableWithFeedback
	onPress={() => handleOnPress(transaction)}
	onLongPress={() => onLongPress?.(transaction)}
	accessibilityRole={CONST.ROLE.BUTTON}
	accessibilityLabel={transaction.text ?? ''}
	isNested
	onMouseDown={(e) => e.preventDefault()}
	hoverStyle={[!transaction.isDisabled && styles.hoveredComponentBG]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}}
	id={transaction.transactionID}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPANDED_TRANSACTION_ROW}
	>
	{transactionRow}
	</PressableWithFeedback>
	) : (
	transactionRow
	)}
	</OfflineWithFeedback>

Because transactionRow itself (the inner TransactionItemRow) only ships a dedicated PressableWithFeedback around the right-arrow icon on wide screens, there is no element left to capture row-level press or hover on desktop:

App/src/components/TransactionItemRow/index.tsx

Lines 895 to 915 in 50270ae

	{!!isLargeScreenWidth &&
	(onArrowRightPress ? (
	<PressableWithFeedback
	disabled={!!isDisabled}
	onPress={() => onArrowRightPress?.()}
	style={[styles.pv2, styles.justifyContentCenter, styles.alignItemsEnd]}
	accessibilityRole={CONST.ROLE.BUTTON}
	accessibilityLabel={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.TRANSACTION_ITEM_ROW.ARROW_RIGHT}
	>
	<Icon
	src={expensicons.ArrowRight}
	fill={theme.icon}
	additionalStyles={!isHover && styles.opacitySemiTransparent}
	width={variables.iconSizeNormal}
	height={variables.iconSizeNormal}
	/>
	</PressableWithFeedback>
	) : (
	<View style={[styles.p3Half, styles.pl0half, styles.pr0half, {width: variables.iconSizeNormal}]} />
	))}

The chevron is the only surviving interactive target, which is exactly the symptom reported. Hover styling is similarly missing because hoverStyle={styles.hoveredComponentBG} only lives on the narrow-branch PressableWithFeedback, so nothing paints the hover background when the row is mounted under the wide-layout branch.

For comparison, the single-report MoneyRequestReportView path wraps its whole row in a PressableWithFeedback for every layout, which is why clicking and hovering work there:

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

Lines 141 to 215 in 50270ae

	return (
	<OfflineWithFeedback pendingAction={pendingAction}>
	<PressableWithFeedback
	key={transaction.transactionID}
	onPress={() => {
	// If a cell was being edited when the user tapped the row, suppress navigation
	// so the second tap doesn't immediately open the transaction detail.
	if (wasEditingOnMouseDownRef.current) {
	wasEditingOnMouseDownRef.current = false;
	return;
	}
	handleOnPress(transaction.transactionID);
	}}
	accessibilityLabel={translate('iou.viewDetails')}
	sentryLabel={CONST.SENTRY_LABEL.REPORT.MONEY_REQUEST_REPORT_TRANSACTION_ITEM}
	role={getButtonRole(true)}
	isNested
	id={transaction.transactionID}
	style={[styles.transactionListItemStyle]}
	hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	onPressIn={() => {
	wasEditingOnMouseDownRef.current = isEditingCell;
	if (canUseTouchScreen()) {
	ControlSelection.block();
	}
	}}
	onPressOut={() => ControlSelection.unblock()}
	onLongPress={() => {
	handleLongPress(transaction.transactionID);
	}}
	disabled={isTransactionPendingDelete(transaction)}
	ref={viewRef}
	wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]}
	>
	{({hovered}) => (
	<TransactionItemRow
	transactionItem={transaction}
	violations={filteredViolations}
	report={report}
	policy={policy}
	isSelected={isSelected}
	dateColumnSize={dateColumnSize}
	amountColumnSize={amountColumnSize}
	taxAmountColumnSize={taxAmountColumnSize}
	shouldShowTooltip
	shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
	shouldShowCheckbox={!!isSelectionModeEnabled || !isSmallScreenWidth}
	onCheckboxPress={toggleTransaction}
	columns={columns}
	isDisabled={isPendingDelete}
	style={[styles.p3]}
	onButtonPress={() => {
	handleOnPress(transaction.transactionID);
	}}
	onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
	isHover={hovered}
	nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
	canEditDate={canEditDate}
	canEditMerchant={canEditMerchant}
	canEditDescription={canEditDescription}
	canEditCategory={canEditCategory}
	canEditAmount={canEditAmount}
	canEditTag={canEditTag}
	onEditDate={onEditDate}
	onEditMerchant={onEditMerchant}
	onEditDescription={onEditDescription}
	onEditCategory={onEditCategory}
	onEditAmount={onEditAmount}
	onEditTag={onEditTag}
	/>
	)}
	</PressableWithFeedback>
	</OfflineWithFeedback>
	);

So the wide-layout branch in TransactionGroupListExpanded is the outlier; it was left without a press/hover surface and the chevron ended up carrying the whole interaction.

What changes do you think we should make in order to solve the problem?

In src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx, stop gating the PressableWithFeedback wrapper on !isLargeScreenWidth and always render the row inside it. The pressable should keep its existing onPress={() => handleOnPress(transaction)}, onLongPress, hoverStyle={[!transaction.isDisabled && styles.hoveredComponentBG]}, accessibilityRole, accessibilityLabel, isNested, onMouseDown, dataSet, id, and sentryLabel props — those are the same values used today in the narrow branch and are what restore both the hover highlight and the row-level click-to-open-RHP behavior on desktop.

Because inline cell editing is enabled on the wide layout, we also need to make sure the row-level press does not fire when the user taps a cell that is currently being edited. We can pull in the same pattern already used in MoneyRequestReportTransactionItem: read useEditingCellState at the top of the row, capture its value on onPressIn into a ref, and bail out of handleOnPress when that ref is set. This keeps inline edit save/cancel interactions intact while making the rest of the row a proper press target again.

No other components need to change. The chevron pressable inside TransactionItemRow stays as-is so keyboard focus and hit targets remain the same on narrow layouts, and the isHover prop that already flows into TransactionItemRow from the outer pressable will finally receive a meaningful value on wide screens, which also restores the arrow icon's existing hover opacity toggle.

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/88729-nested-row-hover-click?expand=1

What alternative solutions did you explore? (Optional)

Wrapping the row at the TransactionItemRow level instead of at the call site was considered, but that component is reused by MoneyRequestReportTransactionItem, TransactionListItem, and other callers that already manage their own outer pressable. Adding a wrapper inside TransactionItemRow would create double-nested pressables in those places and complicate their existing editing-cell logic. Keeping the fix local to TransactionGroupListExpanded avoids touching any of those call sites.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022047750625313147857