Results returned when searching for a user and default back to suggestions

[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.72-0
Reproducible in staging?: Y
Reproducible in production?: N
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: @quinthar
Slack conversation (hyperlinked to channel name): #Quality

Action Performed:

1. Navigate to "Reports" > 'Expenses"
2. Click "From" on the filter options
3. Input a user name or email in the search for someone field

Expected Result:

The searched user should appear in the results if they exist and are selectable by clicking

Actual Result:

Search result displayed after a loading spinner and resets to default suggestions

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

Recording.1347.mp4

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

[Eskalifer1]

I think this is a regression from #62657

The reason for this is that in this useCallback

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 202 to 215 in 0c28b4e

	const userPickerComponent = useCallback(
	({closeOverlay}: PopoverComponentProps) => {
	const value = filterFormValues.from ?? [];
	return (
	<UserSelectPopup
	value={value}
	closeOverlay={closeOverlay}
	onChange={(selectedUsers) => updateFilterForm({from: selectedUsers})}
	/>
	);
	},
	[filterFormValues.from, updateFilterForm],
	);

Passed dependency updateFilterForm

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 86 to 107 in 0c28b4e

	const updateFilterForm = useCallback(
	(values: Partial<SearchAdvancedFiltersForm>) => {
	const updatedFilterFormValues: Partial<SearchAdvancedFiltersForm> = {
	...filterFormValues,
	...values,
	};
	// If the type has changed, reset the status so we dont have an invalid status selected
	if (updatedFilterFormValues.type !== filterFormValues.type) {
	updatedFilterFormValues.status = CONST.SEARCH.STATUS.EXPENSE.ALL;
	}
	const filterString = buildQueryStringFromFilterFormValues(updatedFilterFormValues);
	const searchQueryJSON = buildSearchQueryJSON(filterString);
	const queryString = buildSearchQueryString(searchQueryJSON);
	close(() => {
	Navigation.setParams({q: queryString});
	});
	},
	[filterFormValues],
	);

Which in turn depends on filterFormValues:

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 82 to 84 in 0c28b4e

	const filterFormValues = useMemo(() => {
	return buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
	}, [allCards, currencyList, personalDetails, policyCategories, policyTagsLists, queryJSON, reports, taxRates]);

filterFormValues has a lot of dependencies and one of them is updated during the search (I think personalDetails, but I'm not sure), in any case, even if the values themselves have not changed, a new reference to the object has been created, accordingly updateFilterForm has been updated, and because of this, the userPickerComponent has been completely updated, which is why the value was reset

The solution to the problem can be to pass the dependency to the updateFilterForm useCallback not of the object, but of its stringify version:

    const filterFormValuesKey = JSON.stringify(filterFormValues);

    const updateFilterForm = useCallback(
        (values: Partial<SearchAdvancedFiltersForm>) => {
            const updatedFilterFormValues: Partial<SearchAdvancedFiltersForm> = {
                ...filterFormValues,
                ...values,
            };

            // If the type has changed, reset the status so we dont have an invalid status selected
            if (updatedFilterFormValues.type !== filterFormValues.type) {
                updatedFilterFormValues.status = CONST.SEARCH.STATUS.EXPENSE.ALL;
            }

            const filterString = buildQueryStringFromFilterFormValues(updatedFilterFormValues);
            const searchQueryJSON = buildSearchQueryJSON(filterString);
            const queryString = buildSearchQueryString(searchQueryJSON);

            close(() => {
                Navigation.setParams({q: queryString});
            });
        },
        [filterFormValuesKey],
    );