[Due for payment 2025-02-28] [$250] mWeb - Reports - Empty state screen shown with "0 selected" behind when deleting expenses

[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.0.87-0
Reproducible in staging?: Y
Reproducible in production?: Y
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: https://expensify.testrail.io/index.php?/tests/view/5479455&group_by=cases:section_id&group_order=asc&group_id=319502
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the staging.new.expensify.com website
2. Log in with an account that already contains expenses or create a few
3. Tap on "Reports" on the bottom of the screen
4. Select all the expenses
5. Tap on the green dropdown menu and select "Delete Expenses"
6. Check if empty state screen is displayed without the dropdown menu on the background and can´t be scrolled
7. Check if "Create Expense" button is displayed with the empty state screen

Expected Result:

Empty state screen, should be displayed without any content on the background and the "Create Expense" button should be displayed with it

Actual Result:

When deleting all the expenses, empty state screen appears with the green dropdown menu with the message "0 selected" on the background, it can be scrolled and the "Create Expense" button is not automatically displayed on it

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6717309_1737176377563.Empty.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021881903897650117276
• Upwork Job ID: 1881903897650117276
• Last Price Increase: 2025-01-29
• Automatic offers:
• FitseTLT | Contributor | 105977572

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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.

[Shahidullah-Muffakir]

I think this will be addressed here #54485

[bernhardoj]

Proposal

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

The selection mode is still on after deleting all expenses.

What is the root cause of that problem?

We already have a logic to turn off the selection if the result is empty.

App/src/components/Search/index.tsx

Lines 299 to 304 in 1466369

	useEffect(() => {
	if (!isSearchResultsEmpty || prevIsSearchResultEmpty) {
	return;
	}
	turnOffMobileSelectionMode();
	}, [isSearchResultsEmpty, prevIsSearchResultEmpty]);

When we delete the expenses, we first trigger the API and delay clearing the selection.

App/src/components/Search/SearchPageHeader.tsx

Lines 97 to 103 in 1466369

	deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
	// Translations copy for delete modal depends on amount of selected items,
	// We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
	InteractionManager.runAfterInteractions(() => {
	clearSelectedTransactions();
	});

This will trigger the useEffect above toggling the selection mode off. However, we also have another effect that toggle the selection mode on if it's currently off but the selected items are not empty.

App/src/components/Search/index.tsx

Lines 169 to 172 in 1466369

	if (selectedKeys.length > 0 && !selectionMode?.isEnabled) {
	turnOnMobileSelectionMode();
	}
	}, [isSmallScreenWidth, selectedTransactions, selectionMode?.isEnabled]);

So, the selection is toggled on back.

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

We need to "delay" both clearing the selection and the delete calls. Somehow it doesn't work if I put both of the calls inside interactionmanager, so I decided to do it inside onModalHide which also accurately tells whether the modal is hidden or not. To do this, first we need to create a new ref called isDeleteAfterModalHide.

When deleting the expenses, set isDeleteAfterModalHide to true.

isDeleteAfterModalHide.current = true;
setIsDeleteExpensesConfirmModalVisible(false);

Then, inside the onModalHide, if isDeleteAfterModalHide is true, then we clears the selection and calls the API.

App/src/components/Search/SearchPageHeader.tsx

Lines 326 to 331 in 1466369

	<ConfirmModal
	isVisible={isDeleteExpensesConfirmModalVisible}
	onConfirm={handleDeleteExpenses}
	onCancel={() => {
	setIsDeleteExpensesConfirmModalVisible(false);
	}}

onModalHide={() => {
    if (!isDeleteAfterModalHide.current) {
        return;
    }
    clearSelectedTransactions();
    deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
    isDeleteAfterModalHide.current = false;
}}

There are 2 delete confirmation modals, 1 for narrow layout, 1 for large layout. We need to create a function for the modal hide logic so we can reuse it for both modals.

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

N/A

[truph01]

Proposal

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

• When deleting all the expenses, empty state screen appears with the green dropdown menu with the message "0 selected" on the background, it can be scrolled and the "Create Expense" button is not automatically displayed on it.

What is the root cause of that problem?

• We already have a function to turn off selection mode if the selected options is empty:
  

  App/src/components/Search/index.tsx

  Line 303 in 1466369

  turnOffMobileSelectionMode();

but after that, we call the function to turn on selection mode again because the selectedTransactions update occurs with a delay:

App/src/components/Search/index.tsx

Line 170 in 1466369

turnOnMobileSelectionMode();

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

• We can update:

App/src/components/Search/index.tsx

Line 169 in 1466369

if (selectedKeys.length > 0 && !selectionMode?.isEnabled) {

to:

        if (selectedKeys.length > 0 && !selectionMode?.isEnabled && !prevSelectionMode?.isEnabled) {

with prevSelectionMode = usePrevious(selectionMode)

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)

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

Proposal

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

mWeb - Reports - Empty state screen shown with "0 selected" behind when deleting expenses

What is the root cause of that problem?

We are turning off mobile mode if the search result is empty here

App/src/components/Search/index.tsx

Lines 299 to 304 in 1466369

	useEffect(() => {
	if (!isSearchResultsEmpty || prevIsSearchResultEmpty) {
	return;
	}
	turnOffMobileSelectionMode();
	}, [isSearchResultsEmpty, prevIsSearchResultEmpty]);

But we clear selection after interaction here

App/src/components/Search/SearchPageHeader.tsx

Lines 97 to 103 in 1466369

	deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
	// Translations copy for delete modal depends on amount of selected items,
	// We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
	InteractionManager.runAfterInteractions(() => {
	clearSelectedTransactions();
	});

So when it is too late to clear the selection this effect here will set back the mobile mode on because the seletedKeys will not be zero

App/src/components/Search/index.tsx

Lines 169 to 172 in 1466369

	if (selectedKeys.length > 0 && !selectionMode?.isEnabled) {
	turnOnMobileSelectionMode();
	}
	}, [isSmallScreenWidth, selectedTransactions, selectionMode?.isEnabled]);

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

As we are turning off mobile mode when search is empty we don't need to turnOnMobileSelectionMode here when the search is empty so we can easily avoid turning On MobileSelectionMode when search is empty by adding a condition here

App/src/components/Search/index.tsx

Lines 169 to 170 in fc199fa

	if (selectedKeys.length > 0 && !selectionMode?.isEnabled) {
	turnOnMobileSelectionMode();

if (selectedKeys.length > 0 && !selectionMode?.isEnabled && !isSearchResultsEmpty) {
            turnOnMobileSelectionMode();
        }

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)

[melvin-bot]

@stephanieelliott, @getusha Huh... This is 4 days overdue. Who can take care of this?

[stephanieelliott]

Hey @getusha we have some proposals here, can you review when you get a sec?

[melvin-bot]

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

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[stephanieelliott]

Hey @getusha bump on this -- we have some proposals here, can you review when you get a sec?

[melvin-bot]

@stephanieelliott, @getusha 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[getusha]

Reviewing

[melvin-bot]

@stephanieelliott @getusha this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[getusha]

Still testing out proposals.

[getusha]

@FitseTLT's proposal makes the most sense, the condition is a straight forward fix. QQ: are you able to consistently reproduce it?
🎀 👀 🎀 C+ Reviewed!

[melvin-bot]

Triggered auto assignment to @aldo-expensify, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[stephanieelliott]

PR is on staging

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• Fix - mWeb - Reports - Empty state screen shown with "0 selected" behind when deleting expenses #56353

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

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

• @FitseTLT requires payment automatic offer (Contributor)
• @getusha requires payment through NewDot Manual Requests

[melvin-bot]

@getusha @stephanieelliott @getusha The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]