[$250] Clicking Expense Row in Top Spenders Collapses Group Instead of Opening Expense

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.58-7
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): #Convert

Action Performed:

1. Navigate to Reports > Top Spenders
2. Locate a grouped expense list
3. Click on a report
4. Click on an expense row

Expected Result:

Clicking anywhere on the expense row should:
Open the expense details directly

Actual Result:

Clicking the row:
Collapses/expands the group instead
To open the expense:
User must scroll right and click a small arrow icon

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Recording.2688.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @abdulrahuman5196

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022042963347291804449
• Upwork Job ID: 2042963347291804449
• Last Price Increase: 2026-04-18

[MelvinBot]

Proposal

What is the root cause of that problem?

In TransactionGroupListItem.tsx:514-577, the entire group — header and expanded content — is wrapped in a single PressableWithFeedback. Its onPress handler calls handleToggle() for non-expense-report group types (like Top Spenders, which groups by FROM).

On large screens, individual expense rows inside TransactionGroupListExpanded.tsx:267-269 are rendered without their own PressableWithFeedback — so clicks fall through to the outer pressable and collapse the group instead of opening the expense. The small-screen code path (line 252-266) wraps rows in a pressable, but the outer one still fires.

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

On large screens, wrap individual transaction rows in TransactionGroupListExpanded.tsx with a PressableWithFeedback (similar to the existing small-screen wrapper) that calls handleOnPress(transaction) to open the expense in the RHP. This should include e.stopPropagation() (or equivalent) to prevent the event from bubbling up to the outer group pressable.

What alternative solutions did you explore? (Optional)

An alternative would be to restructure TransactionGroupListItem so the outer PressableWithFeedback only wraps the header, moving the AnimatedCollapsible children outside the pressable's hit area. This is a cleaner separation of concerns but is a larger refactor with more risk of regressions.

---

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]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 (External)

[MobileMage]

Proposal

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

In the Top Spenders (and other grouped) search views, clicking anywhere on an expanded expense row collapses the group instead of opening the expense details. The only way to open an expense is to click the small arrow icon at the far right.

What is the root cause of that problem?

The entire TransactionGroupListItem is wrapped in a single outer PressableWithFeedback whose onPress handler calls handleToggle() for non-expense-report group types. The expanded transaction rows rendered inside (TransactionGroupListExpanded) are, on large screens, plain TransactionItemRow elements with no wrapping pressable of their own — only a small arrow-button target at the right edge triggers openReportInRHP. When the user clicks anywhere else on those rows, the click event bubbles up to the outer PressableWithFeedback and fires handleToggle(), which collapses the group.

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

Lines 252 to 269 in 1f51f18

	{!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
	)}

On narrow screens each row is already wrapped in its own PressableWithFeedback (lines 253–266), so the narrow layout works correctly. The large-screen path simply drops the row into the outer pressable without a press handler, so every tap falls through to the group toggle.

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

Wrap the large-screen transaction row in its own PressableWithFeedback (mirroring the narrow-screen branch) so that tapping the row calls handleOnPress rather than bubbling to the outer group toggle. The isNested prop prevents the inner press from also firing the outer pressable.

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

Lines 247 to 271 in 1f51f18

	return (
	<OfflineWithFeedback
	pendingAction={transaction.pendingAction}
	key={transaction.transactionID}
	>
	{!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>
	);

- {!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
- )}
+ <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>

This makes large-screen and small-screen behaviour consistent: tapping anywhere on an expanded row opens the expense, and the arrow-icon pressable inside TransactionItemRow continues to work as a secondary tap target via its own nested pressable.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[github-actions]

⚠️ @KJ21-ENG Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[KJ21-ENG]

Proposal

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

In Top Spenders grouped results on desktop, clicking an expanded expense row collapses the group instead of opening that expense. Users can only open it reliably by clicking the small arrow icon.

What is the root cause of that problem?

The group item has a parent pressable that toggles group expansion, and expanded rows are rendered inside that press context. In TransactionGroupListExpanded, narrow layout rows use a nested row press target, but large layout rows do not always have the same row-level interaction boundary. So desktop row clicks can resolve to the parent toggle path instead of the row open path.

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

1. Ensure expanded transaction rows always use a nested row-level press target that opens the transaction details on both narrow and large layouts.
2. Keep group toggle behavior scoped to group/header interaction so row clicks do not collapse the group.
3. Add a regression test for grouped desktop transactions to verify row-body click opens details and does not collapse the group.

What alternative solutions did you explore? (Optional)

A narrower fix is adding only event-propagation guards on desktop row clicks. That can fix this repro, but it keeps parent/child interaction ownership unclear. The interaction-boundary approach is more maintainable and less error-prone for future grouped-row changes.

Comparison Branch :- main...KJ21-ENG:kj21/top-spenders-row-open-fix

Proof Of Fix :-

1775917355071903.mp4

[github-actions]

⚠️ @KJ21-ENG Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[emkhalid]

Proposal

What is the root cause of that problem?

In src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx, the whole grouped row, including the expanded children, is wrapped in one parent PressableWithFeedback, and for non-expense-report groups its onPress always calls handleToggle().

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

Lines 273 to 280 in 1f51f18

	const onPress = () => {
	if (isExpenseReportType || transactions.length === 0) {
	onSelectRow(item, transactionPreviewData);
	}
	if (!isExpenseReportType) {
	handleToggle();
	}
	};

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

Lines 514 to 577 in 1f51f18

	<PressableWithFeedback
	ref={pressableRef}
	onLongPress={onLongPress}
	onPress={onPress}
	disabled={isDisabled && !isItemSelected}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_GROUP_LIST_ITEM}
	accessibilityLabel={item.text ?? ''}
	role={getButtonRole(true)}
	isNested
	hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, isItemSelected && styles.activeComponentBG]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}}
	onMouseDown={(e) => e.preventDefault()}
	id={item.keyForList ?? ''}
	style={[
	pressableStyle,
	isFocused && StyleUtils.getItemBackgroundColorStyle(!!isItemSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
	]}
	onFocus={onFocus}
	wrapperStyle={[
	!isLargeScreenWidth && styles.mb2,
	styles.mh5,
	animatedHighlightStyle,
	styles.userSelectNone,
	isLargeScreenWidth && StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected),
	isLargeScreenWidth && isLastItem && styles.overflowHidden,
	]}
	>
	{({hovered}) => (
	<View style={styles.flex1}>
	<AnimatedCollapsible
	isExpanded={isExpanded}
	header={getHeader(hovered)}
	onPress={onExpandIconPress}
	expandButtonStyle={isLargeScreenWidth ? styles.pv2 : styles.pv4Half}
	shouldShowToggleButton={isLargeScreenWidth}
	borderBottomStyle={isLargeScreenWidth && styles.borderNone}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE}
	>
	<TransactionGroupListExpandedItem
	showTooltip={showTooltip}
	canSelectMultiple={canSelectMultiple}
	onCheckboxPress={onCheckboxPress}
	onSelectRow={onSelectRow}
	columns={columns}
	groupBy={groupBy}
	accountID={currentUserDetails.accountID}
	isOffline={isOffline}
	violations={filteredViolations}
	transactions={transactions}
	transactionsVisibleLimit={transactionsVisibleLimit}
	setTransactionsVisibleLimit={setTransactionsVisibleLimit}
	isEmpty={isEmpty}
	shouldDisplayEmptyView={shouldDisplayEmptyView}
	isExpenseReportType={isExpenseReportType}
	transactionsSnapshot={transactionsSnapshot}
	transactionsQueryJSON={groupItem.transactionsQueryJSON}
	searchTransactions={searchTransactions}
	isInSingleTransactionReport={groupItem.transactions.length === 1}
	onLongPress={onExpandedRowLongPress}
	/>
	</AnimatedCollapsible>
	</View>
	)}
	</PressableWithFeedback>

In src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx, narrow-layout child rows are wrapped in their own PressableWithFeedback, but large-layout rows are rendered as a plain TransactionItemRow.

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

Lines 219 to 269 in 1f51f18

	const transactionRow = (
	<TransactionItemRow
	report={transaction.report}
	policy={transaction.policy}
	transactionItem={transaction}
	violations={getTransactionViolations(transaction, violations, currentUserDetails.email ?? '', currentUserDetails.accountID, transaction.report, transaction.policy)}
	isSelected={!!transaction.isSelected}
	dateColumnSize={dateColumnSize}
	amountColumnSize={amountColumnSize}
	taxAmountColumnSize={taxAmountColumnSize}
	shouldShowTooltip={showTooltip}
	shouldUseNarrowLayout={!isLargeScreenWidth}
	shouldShowCheckbox={!!canSelectMultiple}
	checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPANDED_TRANSACTION_ROW_CHECKBOX}
	onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
	columns={currentColumns}
	onButtonPress={() => {
	openReportInRHP(transaction);
	}}
	style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && [styles.pv2, styles.searchTableRowHeight], styles.flex1]}
	isReportItemChild
	isInSingleTransactionReport={isInSingleTransactionReport}
	shouldShowBottomBorder={shouldShowBottomBorder}
	onArrowRightPress={() => openReportInRHP(transaction)}
	shouldShowArrowRightOnNarrowLayout
	reportActions={exportedReportActions}
	/>
	);
	return (
	<OfflineWithFeedback
	pendingAction={transaction.pendingAction}
	key={transaction.transactionID}
	>
	{!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
	)}

That means on desktop there is no row-level press target for the expanded transaction body. Clicking anywhere on the row body falls through to the parent group pressable, and that parent press calls handleToggle(), so the group collapses instead of opening the expense. The only part of the row that has its own press target on desktop is the small arrow icon.

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

Instead of adding another wrapper around the large-screen row in TransactionGroupListExpanded, I would move desktop row-click ownership into TransactionItemRow itself.

Current desktop row rendering in src/components/TransactionItemRow/index.tsx uses a plain View, so grouped desktop rows have no row-body press target of their own.

App/src/components/TransactionItemRow/index.tsx

Lines 827 to 893 in 1f51f18

	return (
	<>
	<View style={[styles.expenseWidgetRadius, styles.flex1, styles.gap2, bgActiveStyles, styles.mw100, style]}>
	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
	{!shouldShowRadioButton && (
	<Checkbox
	disabled={isDisabled}
	onPress={() => {
	onCheckboxPress(transactionItem.transactionID);
	}}
	accessibilityLabel={CONST.ROLE.CHECKBOX}
	isChecked={isSelected}
	containerStyle={styles.m0}
	wrapperStyle={styles.justifyContentCenter}
	sentryLabel={checkboxSentryLabel}
	/>
	)}
	{columns?.map(renderColumn)}
	{shouldShowRadioButton && (
	<View style={[styles.ml1, styles.justifyContentCenter]}>
	<RadioButton
	isChecked={isSelected}
	disabled={isDisabled}
	onPress={() => onRadioButtonPress?.(transactionItem.transactionID)}
	accessibilityLabel={CONST.ROLE.RADIO}
	shouldUseNewStyle
	/>
	</View>
	)}
	{!!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>
	{shouldShowErrors && (
	<TransactionItemRowRBR
	transaction={transactionItem}
	violations={violations}
	report={report}
	missingFieldError={missingFieldError}
	transactionThreadReportID={transactionThreadReportID}
	/>
	)}
	</View>
	{!!shouldShowBottomBorder && (
	<View style={bgActiveStyles}>
	<View style={styles.ph3}>
	<View style={styles.borderBottom} />
	</View>
	</View>
	)}
	</>
	);

I would update TransactionItemRow to accept optional onRowPress / onRowLongPress props and, on large screens only, render the row body inside a nested PressableWithFeedback when those props are provided.

diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx
@@
-    isLargeScreenWidth?: boolean;
+    isLargeScreenWidth?: boolean;
+    onRowPress?: () => void;
+    onRowLongPress?: () => void;
@@
-    return (
+    const renderLargeScreenRow = (hovered = isHover) => (
         <>
-            <View style={[styles.expenseWidgetRadius, styles.flex1, styles.gap2, bgActiveStyles, styles.mw100, style]}>
+            <View style={[styles.expenseWidgetRadius, styles.flex1, styles.gap2, !isDisabled && hovered && styles.hoveredComponentBG, bgActiveStyles, styles.mw100, style]}>
                 ...
             </View>
             {!!shouldShowBottomBorder && (...)}
         </>
     );
+
+    if (isLargeScreenWidth && (onRowPress || onRowLongPress)) {
+        return (
+            <PressableWithFeedback
+                disabled={!!isDisabled}
+                onPress={onRowPress}
+                onLongPress={onRowLongPress}
+                accessibilityRole={CONST.ROLE.BUTTON}
+                accessibilityLabel={transactionItem.text ?? ''}
+                isNested
+                onMouseDown={(e) => e.preventDefault()}
+                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}}
+                id={transactionItem.transactionID}
+            >
+                {({hovered}) => renderLargeScreenRow(hovered)}
+            </PressableWithFeedback>
+        );
+    }
+
+    return renderLargeScreenRow();

This keeps row interaction logic with the row component, which already owns the row’s arrow and action controls.

Then in src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx, instead of wrapping the large-screen row outside the component, I would pass the row-level handlers into TransactionItemRow only for large screens.

Current code:

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

Lines 219 to 245 in 1f51f18

	const transactionRow = (
	<TransactionItemRow
	report={transaction.report}
	policy={transaction.policy}
	transactionItem={transaction}
	violations={getTransactionViolations(transaction, violations, currentUserDetails.email ?? '', currentUserDetails.accountID, transaction.report, transaction.policy)}
	isSelected={!!transaction.isSelected}
	dateColumnSize={dateColumnSize}
	amountColumnSize={amountColumnSize}
	taxAmountColumnSize={taxAmountColumnSize}
	shouldShowTooltip={showTooltip}
	shouldUseNarrowLayout={!isLargeScreenWidth}
	shouldShowCheckbox={!!canSelectMultiple}
	checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPANDED_TRANSACTION_ROW_CHECKBOX}
	onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
	columns={currentColumns}
	onButtonPress={() => {
	openReportInRHP(transaction);
	}}
	style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && [styles.pv2, styles.searchTableRowHeight], styles.flex1]}
	isReportItemChild
	isInSingleTransactionReport={isInSingleTransactionReport}
	shouldShowBottomBorder={shouldShowBottomBorder}
	onArrowRightPress={() => openReportInRHP(transaction)}
	shouldShowArrowRightOnNarrowLayout
	reportActions={exportedReportActions}
	/>

Proposed change:

diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
@@
                         shouldShowBottomBorder={shouldShowBottomBorder}
                         onArrowRightPress={() => openReportInRHP(transaction)}
                         shouldShowArrowRightOnNarrowLayout
                         reportActions={exportedReportActions}
+                        onRowPress={isLargeScreenWidth ? () => handleOnPress(transaction) : undefined}
+                        onRowLongPress={isLargeScreenWidth ? () => onLongPress?.(transaction) : undefined}
                     />

This fixes the issue because desktop expanded rows now have their own nested press target, so clicking the row body opens the expense instead of reaching the parent group toggle handler.

FIx demo:

fix-demo.mov

What alternative solutions did you explore? (Optional)

1. Wrap the large-screen row in TransactionGroupListExpanded with PressableWithFeedback, matching the existing mobile branch. That would work, but it duplicates row interaction ownership outside TransactionItemRow, and that approach is already covered by the existing proposals.

2. Refactor TransactionGroupListItem so the parent PressableWithFeedback only wraps the group header. That is architecturally clean, but it is a broader change to group-row structure and has more regression risk than necessary for this bug.

3. Add stopPropagation()-style handling. I rejected this because it is a more brittle event-flow fix, especially compared with giving the desktop row a proper row-level press target.