[Due for payment 2025-10-28] [$250] Selection state and header not updating correctly when resizing expense report

[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.1.99-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @daledah
Slack conversation (hyperlinked to channel name): #Open Source

Action Performed:

Scenario 1: Incorrect selection state after resizing

1. Go to workspace chat
2. Create two expenses
3. Open the expense report
4. Select one expense and observe the header state (correct)
5. Deselect the expense
6. Resize the screen to a smaller width (<800px)
7. Select one expense
8. Observe that the header now incorrectly shows “Select multiple” view
9. Resize the screen back to large screen (>800px) and observe the state

Scenario 2: Header not updating on resize in selection mode

1. Open expense chat
2. Create two expenses
3. Open the expense report
4. Select one expense (enter selection mode)
5. Resize the screen to small (<800px)
6. Observe that the header does not adapt to the small-screen layout

Expected Result:

There's a checkbox displayed inside each expense row, with checked state for selected expense, The header is updated to "Select multiple" view

Actual Result:

There's no checkboxes shown on expense rows to indicate selection state, The header is not updated to "Select multiple" view

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-08-26.at.00.47.01.mp4

Screen.Recording.2025-08-26.at.00.26.23.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021968479782341761773
• Upwork Job ID: 1968479782341761773
• Last Price Increase: 2025-09-25
• Automatic offers:
• daledah | Contributor | 108963337

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[m-natarajan]

Proposal by @daledah

Proposal

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

Workspace empty state animation is not centered on Android

What is the root cause of that problem?

Currently we don't handle selection mode when there's changes in the selected expense state in SearchContextProvider
We already have logics for this issue inside SelectionListWithModal

App/src/components/SelectionListWithModal/index.tsx

Lines 50 to 80 in a5f72ac

	useEffect(() => {
	// We can access 0 index safely as we are not displaying multiple sections in table view
	const selectedItems =
	selectedItemsProp ??
	sections[0].data.filter((item) => {
	if (isSelected) {
	return isSelected(item);
	}
	return !!item.isSelected;
	});
	selectionRef.current = selectedItems.length;
	if (!isSmallScreenWidth) {
	if (selectedItems.length === 0 && isMobileSelectionModeEnabled) {
	turnOffMobileSelectionMode();
	}
	return;
	}
	if (!isFocused) {
	return;
	}
	if (!wasSelectionOnRef.current && selectedItems.length > 0) {
	wasSelectionOnRef.current = true;
	}
	if (selectedItems.length > 0 && !isMobileSelectionModeEnabled) {
	turnOnMobileSelectionMode();
	} else if (selectedItems.length === 0 && isMobileSelectionModeEnabled && !wasSelectionOnRef.current) {
	turnOffMobileSelectionMode();
	}
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [sections, selectedItemsProp, isMobileSelectionModeEnabled, isSmallScreenWidth, isSelected, isFocused]);

So similar issue is not reproducible in other lists.

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

We should implement logics similar to SelectionListWithModal for SearchContextProvider. We can move it to a hook like "useHandleSelectionMode" and use it in both SelectionListWithModal and SearchContextProvider to prevent repetitive code.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[daledah]

Added an additional proposal for the Scenario 1

Proposal

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

Expense report header is not updated when resizing screen in selection mode

What is the root cause of that problem?

Only in small screen, when selecting the expense, isMobileSelectionModeEnabled is set to true.

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Lines 345 to 347 in a5f72ac

	if (!isMobileSelectionModeEnabled) {
	turnOnMobileSelectionMode();
	}

We show only HeaderWithBackButton when isMobileSelectionModeEnabled, without taking screensize into account

App/src/components/MoneyReportHeader.tsx

Lines 1076 to 1091 in a5f72ac

	if (isMobileSelectionModeEnabled) {
	// If mobile selection mode is enabled but only one or no transactions remain, turn it off
	if (transactions.length <= 1) {
	turnOffMobileSelectionMode();
	}
	return (
	<HeaderWithBackButton
	title={translate('common.selectMultiple')}
	onBackButtonPress={() => {
	clearSelectedTransactions(true);
	turnOffMobileSelectionMode();
	}}
	/>
	);
	}

So when resizing to bigger width, the header is not updated to expected view.

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

We should add shouldUseNarrowLayout check to here

App/src/components/MoneyReportHeader.tsx

Line 1076 in a5f72ac

if (isMobileSelectionModeEnabled) {

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

NA
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[lorretheboy]

Proposal

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

Selection state and header not updating correctly when resizing expense report

What is the root cause of that problem?

Mobile selection mode state doesn't respond to screen size changes so that when we have selected transactions and resize between large/small screens, the mobile selection mode state doesn't automatically adjust

Lastly, the selection state and mobile selection mode need to be properly synchronized when screen size changes - but currently it is not

App/src/components/TransactionItemRow/index.tsx

Line 474 in a083eb6

{!shouldShowRadioButton && (

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Lines 345 to 347 in a083eb6

	if (!isMobileSelectionModeEnabled) {
	turnOnMobileSelectionMode();
	}

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

Add here the useEffect to handle mobile selection mode responsiveness

    useEffect(() => {
        if (selectedTransactionIDs.length === 0) {
            return;
        }

        if (isSmallScreenWidth && !isMobileSelectionModeEnabled) {
            // When screen becomes small and we have selected transactions, turn on mobile selection mode
            turnOnMobileSelectionMode();
        } else if (!isSmallScreenWidth && isMobileSelectionModeEnabled) {
            // When screen becomes large and we have selected transactions, turn off mobile selection mode
            // This allows the normal large-screen selection UI to take over
            turnOffMobileSelectionMode();
        }
    }, [isMobileSelectionModeEnabled, isSmallScreenWidth, selectedTransactionIDs.length]);

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 146 in a083eb6

We should update to check shouldShowCheckbox in here as well

!shouldShowRadioButton && shouldShowCheckbox && 

App/src/components/TransactionItemRow/index.tsx

Line 474 in a083eb6

{!shouldShowRadioButton && (

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@adelekennedy Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@adelekennedy 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@adelekennedy Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

@adelekennedy 12 days overdue. Walking. Toward. The. Light...

[melvin-bot]

@adelekennedy this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!