[$250] Reports - Tapping Submit button when the report is selected does not submit the report

[lanitochka17]

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.52-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13176922/test-cases/41237519
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 iOs 26.3.1
App Component: Money Requests

Action Performed:

1. Sign in to ND
2. Create a workspace, set Delay submissions to Manually in Workflows
3. Create an expense to the workspace
4. Navigate to the Reports
5. Long press on the expense row
6. Tap Select
7. Tap the Submit button

Expected Result:

The report is submitted

Actual Result:

Tapping Submit button, when the report is selected, unselects and reselects the report, and does not actually submits the report

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7120943_1775241554907.Submit_button_when_selected.1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @Krishna2323

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022040194918020857528
• Upwork Job ID: 2040194918020857528
• Last Price Increase: 2026-04-03

[MelvinBot]

Proposal

What is the root cause of that problem?

When mobile selection mode is active on the Reports screen, each row's action button (Submit, Approve, etc.) is rendered with pointerEvents: 'none' and isDisabled (ActionCell/index.tsx:83-97), controlled by ExpenseReportListItemRow.tsx:240 which sets isInMobileSelectionMode = shouldUseNarrowLayout && !!canSelectMultiple.

Because pointerEvents: 'none' makes the button transparent to touch, taps pass through to the parent row pressable (BaseListItem.tsx:157-166), which calls onSelectRow(item). That handler has an early return in Search/index.tsx:1052-1055 that calls toggleTransaction(item) whenever isMobileSelectionModeEnabled is true — so tapping "Submit" just toggles the row's selection state.

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

The action buttons (Submit, Approve, etc.) should remain functional during mobile selection mode. When isInMobileSelectionMode is true, the ActionCell should not have pointerEvents: 'none' or isDisabled applied to action buttons (i.e., non-"View" buttons like Submit/Approve). This way, tapping the Submit button will invoke goToItem (the action handler) instead of falling through to the row's selection toggle.

Specifically, in ExpenseReportListItemRow.tsx, the shouldDisablePointerEvents prop passed to ActionCell should exclude action-type buttons from being disabled during selection mode, or the ActionCell itself should conditionally keep action buttons active when the action is not "View".

What alternative solutions did you explore?

An alternative would be to modify the onSelectRow handler in Search/index.tsx to detect whether the tap originated from the action button area and route it appropriately. However, this is more fragile and harder to maintain than simply keeping the button itself tappable.

---

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 - @Krishna2323 (External)

[melvin-bot]

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

[KJ21-ENG]

Proposal

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

On narrow/mobile Reports with multi-select enabled, tapping the Submit action on a selected expense does not submit it. Instead, the row gets unselected/reselected and remains in selection mode.

From the attached video, after entering “Select multiple” with 1 selected expense, tapping Submit keeps the user on the same selection screen and selection state toggles instead of performing submit.

What is the root cause of that problem?

In mobile selection mode, the action button is intentionally made non-interactive via pointer-events disabling, so taps fall through to row selection handling.

UserInfoAndActionButtonRow passes shouldDisablePointerEvents={isInMobileSelectionMode || isDisabledItem} into ActionCell:

App/src/components/SelectionListWithSections/Search/UserInfoAndActionButtonRow.tsx

Lines 68 to 79 in 1d43910

	<ActionCell
	action={item.action}
	goToItem={handleActionButtonPress}
	isSelected={item.isSelected}
	isLoading={isActionLoading}
	policyID={item.policyID}
	reportID={item.reportID}
	hash={item.hash}
	amount={(item as TransactionListItemType)?.amount ?? (item as TransactionReportGroupListItemType)?.total}
	extraSmall={!isLargeScreenWidth}
	shouldDisablePointerEvents={isInMobileSelectionMode || isDisabledItem}
	/>

ActionCell then applies pointerEventsNone and disabled state to the button:

App/src/components/SelectionListWithSections/Search/ActionCell/index.tsx

Lines 72 to 75 in 1d43910

	extraSmall={extraSmall}
	style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
	isDisabled={shouldDisablePointerEvents}
	shouldStayNormalOnDisable={shouldDisablePointerEvents}

The row is explicitly marked as being in mobile selection mode for expense rows:

App/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

Lines 238 to 244 in 1d43910

	<UserInfoAndActionButtonRow
	item={item}
	handleActionButtonPress={onButtonPress}
	shouldShowUserInfo={showUserInfo}
	containerStyles={[styles.mb2, styles.ph0]}
	isInMobileSelectionMode={shouldUseNarrowLayout && !!canSelectMultiple}
	/>

When row interaction runs in selection mode, onSelectRow immediately calls toggleTransaction(item) and returns, which explains the unselect/reselect behavior instead of submit:

App/src/components/Search/index.tsx

Lines 913 to 921 in 1d43910

	const onSelectRow = useCallback(
	(item: SearchListItem, transactionPreviewData?: TransactionPreviewData) => {
	if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
	return;
	}
	if (isMobileSelectionModeEnabled) {
	toggleTransaction(item);
	return;

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

1. Keep row selection behavior intact for list-row taps, but allow explicit action-button taps (Submit/Approve/Pay) to remain interactive in mobile selection mode.
2. In UserInfoAndActionButtonRow, stop passing isInMobileSelectionMode as a blanket pointer-events disable for ActionCell; only disable when truly non-actionable (isDisabledItem, loading, etc.).
3. Ensure this applies only to action button interaction, so accidental row taps in selection mode still toggle selection as today.
4. Add regression coverage on narrow/mobile Reports multi-select: tapping Submit on selected expense triggers submit flow and does not toggle selection state.

What alternative solutions did you explore? (Optional)

• Adjusting onSelectRow to detect and ignore taps originating from the action-button area was considered, but that is more brittle and event-propagation dependent.
• Keeping action buttons interactive directly is simpler, clearer, and aligns with expected explicit-action behavior.

[trasnake87]

Proposal

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

On mobile, when a report row is selected (mobile selection mode is active) in the Reports screen, tapping the Submit/Approve action button does not execute the action — instead it toggles the row's selection state, because the button is touch-transparent and the tap falls through to the parent row pressable.

What is the root cause of that problem?

In ExpenseReportListItem.tsx, the action button rendered by ExpenseReportListItemRow lives inside BaseListItem's PressableWithFeedback. When mobile selection mode is active, the action button becomes touch-transparent (pointerEvents: 'none'), so any tap in that area is claimed by the parent PressableWithFeedback, which calls onSelectRow — and onSelectRow unconditionally toggles selection in mobile mode (ExpenseReportListItem.tsx:270-291). The component never renders any active touch target over the action button area that could intercept the tap before the parent row pressable handles it.

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

In ExpenseReportListItem.tsx, we should render a transparent Pressable overlay positioned over the action button area when in mobile selection mode. This overlay sits inside BaseListItem's pressable but on top of the disabled ActionCell, so React Native's responder system gives it priority over the parent pressable. It calls handleOnButtonPress (the action handler), preventing the tap from reaching the row's onSelectRow toggle.

// In ExpenseReportListItem.tsx, add import:
import {Pressable, View} from 'react-native';

// Inside the BaseListItem children render, after ExpenseReportListItemRow:
{(hovered) => (
    <View style={[styles.flex1]}>
        <ExpenseReportListItemRow
            // ... existing props
        />
        {!isLargeScreenWidth && !!canSelectMultiple && (
            <Pressable
                onPress={handleOnButtonPress}
                style={[styles.pAbsolute, styles.t0, styles.r0, {width: variables.w72, height: '100%'}]}
            />
        )}
        {getDescription}
    </View>
)}

This overlay is only rendered in narrow-layout mobile selection mode (!isLargeScreenWidth && !!canSelectMultiple), which is exactly when the underlying ActionCell is disabled. On wide screens or outside selection mode, behavior is unchanged. The fix is confined to a single file and requires no changes to ActionCell, BaseListItem, or event propagation logic.

[trasnake87]

Contributor details
Your Expensify account email: trasnake87@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f770315ab181656

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[abbasifaizan70]

Proposal

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

On mobile, when a report row is selected (mobile selection mode is active) in the Reports screen, tapping the Submit/Approve action button does not execute the action — instead it toggles the row's selection state, because the button is touch-transparent and the tap falls through to the parent row pressable.

What is the root cause of that problem?

On iOS narrow layout, the action button sits in an absolute right-side column, but selection mode makes that button non-interactive for all rows (pointerEvents: 'none' through shouldDisablePointerEvents). When that happens, taps in the button area pass through to the parent row pressable and toggle selection instead of triggering the action. The action column also needs to be on top of overlapping row content during selection mode, otherwise it looks visible but does not receive touches.

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

Lines 251 to 319 in a718167

	<View
	accessible
	accessibilityLabel={groupAccessibilityLabel}
	role={CONST.ROLE.BUTTON}
	style={{marginRight: variables.w72}}
	>
	<View style={[styles.pt0, styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.mb2]}>
	{showUserInfo && (
	<UserInfoCellsWithArrow
	shouldShowToRecipient={shouldShowToRecipient}
	participantFrom={item?.from}
	participantFromDisplayName={participantFromDisplayName}
	participantToDisplayName={participantToDisplayName}
	participantTo={item?.to}
	avatarSize={CONST.AVATAR_SIZE.SMALL_SUBSCRIPT}
	style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}
	infoCellsTextStyle={{lineHeight: 14}}
	infoCellsAvatarStyle={styles.pr1}
	fromRecipientStyle={!shouldShowToRecipient ? styles.mw100 : {}}
	shouldUseArrowIcon={false}
	/>
	)}
	</View>
	<View style={[styles.pt0, styles.flexRow, styles.alignItemsCenter, styles.justifyContentStart, {marginRight: -variables.w72}]}>
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
	{!!canSelectMultiple && (
	<Checkbox
	onPress={onCheckboxPress}
	isChecked={isSelectAllChecked}
	isIndeterminate={isIndeterminate}
	containerStyle={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!item.isDisabled)]}
	disabled={isDisabledCheckbox}
	accessibilityLabel={item.text ?? ''}
	shouldStopMouseDownPropagation
	style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), isDisabledCheckbox && styles.cursorDisabled]}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPENSE_REPORT_CHECKBOX}
	/>
	)}
	<View style={[styles.flexShrink1, styles.flexGrow1, styles.mnw0, styles.mr2]}>
	<ReportSearchHeader
	report={item}
	style={[{maxWidth: variables.reportSearchHeaderMaxWidth}]}
	transactions={item.transactions}
	avatarBorderColor={finalAvatarBorderColor}
	/>
	</View>
	</View>
	<View style={[styles.flexShrink0, styles.flexColumn, styles.alignItemsEnd, styles.gap1]}>
	<TotalCell
	total={totalDisplaySpend}
	currency={currency}
	isScanning={isScanning}
	/>
	</View>
	</View>
	</View>
	<View style={[styles.pAbsolute, styles.t0, styles.r0, {width: variables.w72}, styles.alignItemsEnd]}>
	<ActionCell
	action={item.action}
	goToItem={onButtonPress}
	isSelected={item.isSelected}
	isLoading={isActionLoading}
	policyID={item.policyID}
	reportID={item.reportID}
	hash={item.hash}
	amount={item.total}
	extraSmall
	shouldDisablePointerEvents={isInMobileSelectionMode || isPendingDelete}
	/>

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

Lines 71 to 83 in a718167

	<View style={[{width: isLargeScreenWidth ? variables.w80 : variables.w72}, styles.alignItemsEnd]}>
	<ActionCell
	action={item.action}
	goToItem={handleActionButtonPress}
	isSelected={item.isSelected}
	isLoading={isActionLoading}
	policyID={item.policyID}
	reportID={item.reportID}
	hash={item.hash}
	amount={(item as TransactionListItemType)?.amount ?? (item as TransactionReportGroupListItemType)?.total}
	extraSmall={!isLargeScreenWidth}
	shouldDisablePointerEvents={isInMobileSelectionMode || isDisabledItem}
	/>

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

1. In ExpenseReportListItemRow.tsx (narrow layout), keep the action area touchable in selection mode by using pointerEvents="box-none" on the main content wrapper, raise the action column above overlapping content with zIndex, and only disable action pointer events for rows that are not selected (or pending delete).

2. In UserInfoAndActionButtonRow.tsx, apply the same pointer-disable rule (disable only when not selected in mobile selection mode) and raise the action column with zIndex on small screens so taps land on the button instead of the row pressable.

Test Branch

Link

Demo

Screen.Recording.2026-04-04.at.4.31.15.AM.mov