[Due for payment 2025-04-28] [Better Expense Report View] Checkbox state is not reset after switching tabs

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.24-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Log in with Expensifail account

1. Go to staging.new.expensify.com
2. Create a workspace
3. Go to workspace chat
4. Submit an expense
5. Go to Reports
6. Go to Expense Reports
7. Click on the expense report from Step 4
8. Select the checkbox
9. Go to another tab (Expense in Reports or Inbox)
10. Go back to Reports > Expense Reports
11. Click on the same expense preview in Step 7

Expected Result:

The checkbox state will be reset after switching tabs

Actual Result:

The checkbox state is not reset after switching tabs

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6796031_1744118095456.20250408_210121.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

Triggered auto assignment to @marcochavezf (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[mountiny]

this is behind beta

[samranahm]

Proposal

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

Checkbox state is not reset after switching tabs

What is the root cause of that problem?

Here

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 83 in 9eb3655

const {selectedTransactionsID, setSelectedTransactionsID, toggleTransaction, isTransactionSelected} = useMoneyRequestReportContext(report.reportID);

setSelectedTransactionsID does not update when user navigate back from MoneyRequestReportTransactionList or switch the tabs

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

we should add useFocusEffect in MoneyRequestReportTransactionList that will reset the setSelectedTransactionsID when user switch the tabs

useFocusEffect(
    useCallback(() => {    
        return () => {
            setSelectedTransactionsID([]);
        };
    }, []),
); 

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

N/A

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.

Results

new-833.mp4

[mountiny]

@allgandalf @DylanDylann do you want to review the proposal please?

[ChavdaSachin]

Proposal

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

[Better Expense Report View] Checkbox state is not reset after switching tabs

What is the root cause of that problem?

On search > expenseReportPage useMoneyRequestReportContext hook is used to keep track of selections and hence selections does not clear after page reload/ tab change.
And no additional mechanism no clear selection for the same is used here.

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 83 in 47a89b9

const {selectedTransactionsID, setSelectedTransactionsID, toggleTransaction, isTransactionSelected} = useMoneyRequestReportContext(report.reportID);

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

Generally app has tendency to clear the selection on any navigation with only one exception - app does not clear selection when user clicks a list item and item opens in RHP.

For example.

1. open search page and go to expenses select few expense using checkbox.
2. now click on any of the expense from list and the expense details would open in RHP.
3. now close the RHP.
4. Notice selections are not cleared.
5. now keep few expenses selected and navigate to any other search tab ie. Expense Reports.
6. Navigate back to Expenses tab.
7. Notice selection is cleared.

Reference Video

Screen.Recording.2025-04-08.at.10.35.01.PM.mov

We already have a hook for the above situation - useCleanupSelectedOptions.
Add following code snippet here.

    const cleanupSelectedOption = useCallback(() => setSelectedTransactionsID([]), []);
    useCleanupSelectedOptions(cleanupSelectedOption);

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 83 in 47a89b9

const {selectedTransactionsID, setSelectedTransactionsID, toggleTransaction, isTransactionSelected} = useMoneyRequestReportContext(report.reportID);

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)

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.

[allgandalf]

@mountiny , this bug was already reported during PR testing:

• Add selection to table on MoneyRequestReport page #59433 (comment)

We decided to fix this in a follow up:

• Add selection to table on MoneyRequestReport page #59433 (comment)

c.c. @jnowakow

[mountiny]

We could handle it externally maybe what do you think @allgandalf @jnowakow

[allgandalf]

@jnowakow said:

it should be fixed in follow up because it won't be that easy.

So maybe he is seeing a core issue here with the new preview which i am not, so i will wait for him to comment before opening this up to the community

[mountiny]

yep gonna wait for confirmation

[jnowakow]

Simple useFocusEffect from #59833 (comment) won't work because it will clean selected items when RHP is opened.

Solution from #59833 (comment) is almost good but doesn't work when navigating back using chevron:

close.mov

[nkdengineer]

Proposal

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

The checkbox state is not reset after switching tabs

What is the root cause of that problem?

The data is stored in the context, and we don't have the logic to clear the transaction when the page is blurred/unmounted

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 83 in e8ac1a0

const {selectedTransactionsID, setSelectedTransactionsID, toggleTransaction, isTransactionSelected} = useMoneyRequestReportContext(report.reportID);

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

1. We can use useCleanupSelectedOptions hook to clear the data when the page is blurred. But it will not resolve this bug because when we click on the back button, the page is unmounted, and this hook doesn't cover this case.

const cleanupSelectedOption = useCallback(() => setSelectedTransactionsID([]), []);
useCleanupSelectedOptions(cleanupSelectedOption);

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 83 in e8ac1a0

const {selectedTransactionsID, setSelectedTransactionsID, toggleTransaction, isTransactionSelected} = useMoneyRequestReportContext(report.reportID);

2. To fix the bug above, add a new useEffect to call the clean function again if the component is unmounted in the hook

const cleanupFunctionRef = useRef(cleanupFunction);
useEffect(() => {
    cleanupFunctionRef.current = cleanupFunction;
}, [cleanupFunction]);

useEffect(() => {
    return () => {
        cleanupFunctionRef.current?.();
    }
}, [])

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.

[nkdengineer]

@jnowakow What do you think about my proposal?

[ChavdaSachin]

Solution from #59833 (comment) is almost good but doesn't work when navigating back using chevron:

That would be a simple fix on top of my proposal.
Instead of using useMoneyRequestReportContext we could directly use useState to hold selections like all other pages.
It would clear selections when page unmount.

I will update my proposal shortly and would upload a resulting video.

cc. @jnowakow

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[DylanDylann]

@jnowakow You will solve this issue in somewhere, right?

[jnowakow]

@ChavdaSachin your video shows search page instead of new report page.

[jnowakow]

@DylanDylann there are several issues on this page and we're working on follow-ups so we will handle this. cc @mountiny

[melvin-bot]

@DylanDylann Still overdue 6 days?! Let's take care of this!

[melvin-bot]

@DylanDylann 10 days overdue. I'm getting more depressed than Marvin.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.30-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Clear selection on navigation #60258

If no regressions arise, payment will be issued on 2025-04-28. 🎊

For reference, here are some details about the assignees on this issue:

• @jnowakow does not require payment (Contractor)
• @allgandalf requires payment (Needs manual offer from BZ)
• @DylanDylann requires payment through NewDot Manual Requests

[allgandalf]

Good to close, no checklist here!

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @zanyrenney you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @jnowakow is from an agency-contributor and not due payment
• ROLE: @allgandalf paid $(AMOUNT) via Upwork (LINK)
• Reviewer: @DylanDylann owed $250 via NewDot

BugZero Checklist (@zanyrenney)

• I have verified the correct assignees and roles are listed above and updated the necessary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[zanyrenney]

@allgandalf - how come no checklist is required here? Is no payment due?

[allgandalf]

This issue is part of better expense report project, so regression tests will be added later and yes, no payment due here as we'll be paid separately at the end of project

[zanyrenney]

Awesome, thanks for letting me know @allgandalf - closing this out given the comment above.