[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