[HOLD for payment 2024-08-19] [$250] Search - Select mode remains with empty state screen after deleting all expenses

[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.0.13-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• There is only one unpaid expense and no other expeneses in the account

1. Launch New Expensify app
2. Go to Search
3. Long press on the expense
4. Tap Select
5. Tap on the dropdown
6. Tap Delete
7. Delete the expense

Expected Result:

The select mode will exit because there is no more expense

Actual Result:

The select mode remains with empty state screen

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6554769_1722093464748.Screen_Recording_20240727_231204_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cece455709af5d24
• Upwork Job ID: 1818027569717051206
• Last Price Increase: 2024-07-29
• Automatic offers:
• dominictb | Contributor | 103369346

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nyomanjyotisa]

Proposal

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

Select mode remains with empty state screen after deleting all expenses

What is the root cause of that problem?

We don't set isMobileSelectionModeActive to false if shouldShowEmptyState here

App/src/components/Search/index.tsx

Lines 122 to 132 in 08bb00b

	if (shouldShowEmptyState) {
	return (
	<>
	<SearchPageHeader
	status={status}
	hash={hash}
	/>
	<EmptySearchView />
	</>
	);
	}

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

set isMobileSelectionModeActive to false if shouldShowEmptyState

    if (shouldShowEmptyState) {
        setIsMobileSelectionModeActive?.(false);

        return (
            <>
                <SearchPageHeader
                    status={status}
                    hash={hash}
                />
                <EmptySearchView />
            </>
        );
    }

RESULT

-1-New-Expensify.11.mp4

What alternative solutions did you explore? (Optional)

[cretadn22]

Proposal

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

Select mode remains with empty state screen after deleting all expenses

What is the root cause of that problem?

When all expenses are deleted, isMobileSelectionModeActive remain true, causing the "selectMultiple" title to still be shown

App/src/pages/Search/SearchPageBottomTab.tsx

Lines 53 to 66 in 08bb00b

	{!isMobileSelectionModeActive && queryJSON ? (
	<>
	<TopBar
	activeWorkspaceID={policyIDs}
	breadcrumbLabel={translate('common.search')}
	shouldDisplaySearch={false}
	/>
	<SearchStatusMenu status={queryJSON.status} />
	</>
	) : (
	<HeaderWithBackButton
	title={translate('search.selectMultiple')}
	onBackButtonPress={() => setIsMobileSelectionModeActive(false)}
	/>

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

This is the logic for showing an empty view modal

App/src/components/Search/index.tsx

Lines 122 to 132 in 08bb00b

	if (shouldShowEmptyState) {
	return (
	<>
	<SearchPageHeader
	status={status}
	hash={hash}
	/>
	<EmptySearchView />
	</>
	);
	}

If shouldShowEmptyState is true, we should set isMobileSelectionModeActive to false and we should display only the EmptySearchView component. This is because, in this case, we won’t pass isMobileSelectionModeActive to the SearchPageHeader component, which will then return null.

    if (shouldShowEmptyState) {
        setIsMobileSelectionModeActive?.(false);
        return (
                <EmptySearchView />
        );
    }

Removing the redundant SearchPageHeader component is important because it enhances performance (especially on mobile) and reduces errors in the logs

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal

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

The select mode remains with empty state screen

What is the root cause of that problem?

When deleting any expenses, we don't set isMobileSelectionModeActive to false:

App/src/components/Search/SearchPageHeader.tsx

Lines 149 to 156 in 98d8a5a

	onSelected: () => {
	if (isOffline) {
	setOfflineModalOpen?.();
	return;
	}
	onSelectDeleteOption?.(selectedTransactionsKeys);
	},

like we did in Hold and Unhold option:

App/src/components/Search/SearchPageHeader.tsx

Line 110 in 98d8a5a

setIsMobileSelectionModeActive?.(false);

App/src/components/Search/SearchPageHeader.tsx

Line 134 in 98d8a5a

setIsMobileSelectionModeActive?.(false);

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

We should use

                    if (isMobileSelectionModeActive) {
                        setIsMobileSelectionModeActive?.(false);
                    }

when deleting selected expenses as well.

What alternative solutions did you explore? (Optional)

We can use

    const isSearchResultsEmpty = !searchResults || SearchUtils.isSearchResultsEmpty(searchResults);
    const prevIsSearchResultEmpty = usePrevious(isSearchResultsEmpty);

    useEffect(() => {
        if (isSearchResultsEmpty && !prevIsSearchResultEmpty) {
            setIsMobileSelectionModeActive?.(false);
        }
    }, [isSearchResultsEmpty, prevIsSearchResultEmpty, setIsMobileSelectionModeActive]);

in this page. It will call setIsMobileSelectionModeActive?.(false) once the search result changes from true to false.

[melvin-bot]

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

[melvin-bot]

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

[hungvu193]

Thanks for the proposals everyone!

@nyomanjyotisa @cretadn22 I don't think updating a state inside a render statement is a good way to handle this issue.

@dominictb 's alternative proposal here looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[hungvu193]

Sorry for the notification, found a bug while testing selected proposal, I withdraw my previous decision.

[dominictb]

Proposal updated

Updated the code changes in the alternative solution

[dominictb]

@hungvu193 I have updated the code changes in my alternative solution to make it easier for you to test. The general idea remains the same.

[hungvu193]

I was about to ask you for more information. Thanks, will test it shortly

@hungvu193 I have updated the code changes in my alternative solution to make it easier for you to test. The general idea remains the same.

[hungvu193]

All good. Let's go with @dominictb 's alternative proposal. cc @NikkiWines

[cretadn22]

If shouldShowEmptyState is true, we should set isMobileSelectionModeActive to false and we should display only the EmptySearchView component. This is because, in this case, we won’t pass isMobileSelectionModeActive to the SearchPageHeader component, which will then return null.

if (shouldShowEmptyState) {
    setIsMobileSelectionModeActive?.(false);
    return (
            <EmptySearchView />
    );
}

Removing the redundant SearchPageHeader component is important because it enhances performance (especially on mobile) and reduces errors in the logs

@hungvu193 @dominictb I discover an improvement point. Let's include it in the PR phase

[sakluger]

@hungvu193 - does @cretadn22's comment impact your recommendation?

[hungvu193]

@hungvu193 - does @cretadn22's comment impact your recommendation?

No. I'll still keep my decision. Please assign @dominictb @NikkiWines

[NikkiWines]

Yep @dominictb's alt proposal looks good 👍

[melvin-bot]

📣 @dominictb 🎉 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 📖

[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.0.18-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: turn off selection mode if search result become empty #46797

If no regressions arise, payment will be issued on 2024-08-19. 🎊

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

• @hungvu193 requires payment through NewDot Manual Requests
• @dominictb requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@hungvu193] The PR that introduced the bug has been identified. Link to the PR:
• [@hungvu193] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@hungvu193] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@hungvu193] Determine if we should create a regression test for this bug.
• [@hungvu193] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@sakluger] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[hungvu193]

• The PR that introduced the bug has been identified. Link to the PR: [Search v1] Add bulk actions #44385
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug: No.

This is a new feature that we added recently and still under development I believe so I don't think we need regression test for this one.

[sakluger]

Thanks @hungvu193. Could you please write out the proposed regression test steps?

[sakluger]

Summarizing payment on this issue:

Contributor: @dominictb $250, paid via Upwork
Contributor+: @hungvu193 $250, please request on Newdot

[hungvu193]

Thanks @hungvu193. Could you please write out the proposed regression test steps?

My bad, I updated the checklist

[sakluger]

Ah, that makes more sense. Thanks!

[JmillsExpensify]

$250 approved for @hungvu193