Search - Status bar is not preserved and selection is cleared when going from Inbox to Search

[IuliiaHerets]

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: v9.0.22-5
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh1681@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Account has expenses in Outstanding or Paid tabs.

1. Launch New Expensify app.
2. Go to Search.
3. Go to Outstanding.
4. Long press on the expense > Select.
5. Go to Inbox.
6. Go back to Search.

Expected Result:

App will open Outstanding tab with the selection preserved when going from Search to Inbox and back to Search.

Actual Result:

App opens All tab with the selection cleared when going from Search to Inbox and back to Search.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6576455_1724099303763.ScreenRecording_08-20-2024_04-20-02_1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @alexpensify (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 @marcaaron (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[IuliiaHerets]

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

[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.

[rayane-djouah]

@luacmartins Is this a bug?

[marcaaron]

Not deploy blocker worthy IMO.

[bernhardoj]

Proposal

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

The status bar selected item isn't preserved after switching to another bottom tab. This only happens on the small screen.

What is the root cause of that problem?

When we press the search bottom tab, we call getCurrentSearchParams to get the search params from the existing search bottom tab or central pane in the nav stack, then pass it to the new search screen.

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 91 to 95 in 44a7516

	const currentSearchParams = SearchUtils.getCurrentSearchParams();
	if (currentSearchParams) {
	const {q, ...rest} = currentSearchParams;
	const policy = PolicyUtils.getPolicy(currentSearchParams?.policyIDs);
	Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: q, ...rest, policyIDs: policy ? currentSearchParams?.policyIDs : undefined}));

App/src/libs/SearchUtils.ts

Lines 297 to 312 in 44a7516

	function getCurrentSearchParams() {
	const rootState = navigationRef.getRootState() as State<RootStackParamList>;
	const lastSearchCentralPaneRoute = rootState.routes.filter((route) => route.name === SCREENS.SEARCH.CENTRAL_PANE).at(-1);
	const lastSearchBottomTabRoute = rootState.routes[0].state?.routes.filter((route) => route.name === SCREENS.SEARCH.BOTTOM_TAB).at(-1);
	if (lastSearchCentralPaneRoute) {
	return lastSearchCentralPaneRoute.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
	}
	if (lastSearchBottomTabRoute) {
	const {policyID, ...rest} = lastSearchBottomTabRoute.params as BottomTabNavigatorParamList[typeof SCREENS.SEARCH.BOTTOM_TAB];
	const params: AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE] = {policyIDs: policyID, ...rest};
	return params;
	}
	}

This works well on large screen, but not on small screen.

When we go to the search page, the nav stack looks like this:
small: [BottomTab: [Home, SearchBottomTab], SearchCentralPane]
large: [BottomTab: [Home, SearchBottomTab], Report, SearchCentralPane]

Both the search bottom tab and central pane holds the search query (q) params. When we change the status to paid, for example, the query params is only updated to the search central pane.

App/src/components/Search/SearchStatusBar.tsx

Line 137 in 44a7516

const onPress = singleExecution(() => Navigation.setParams({q: item.query}));

On the large screen, when we go back to home, the nav stack becomes:
[BottomTab: [Home, SearchBottomTab, Home], Report, SearchCentralPane, Report]

SearchCentralPane is still in the stack with the status query params, so, when we switch back to the search page, getCurrentSearchParams will return the query params with the previous status selected.

But on the small screen, going back to home will pop the search central pane out.
small: [BottomTab: [Home, SearchBottomTab, Home]]

App/src/libs/Navigation/linkTo/index.ts

Lines 180 to 184 in 44a7516

	// If the layout is small we need to pop everything from the central pane so the bottom tab navigator is visible.
	root.dispatch({
	type: 'POP_TO_TOP',
	target: rootState.key,
	});

So, when we switch back to the search page, getCurrentSearchParams will return the query params from SearchBottomTab which contains the old status query.

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

We need to update the bottom tab params too when selecting the status.

App/src/components/Search/SearchStatusBar.tsx

Line 137 in 44a7516

const onPress = singleExecution(() => Navigation.setParams({q: item.query}));

const searchBottomTabKey = getTopmostBottomTabRoute(navigationRef.getRootState() as State<RootStackParamList>)?.key;
Navigation.setParams({q: item.query});
Navigation.setParams({q: item.query}, searchBottomTabKey);

We need to update getTopmostBottomTabRoute to return the bottom tab key too.

App/src/libs/Navigation/getTopmostBottomTabRoute.ts

Line 18 in 44a7516

return {name: topmostBottomTabRoute.name as BottomTabName, params: topmostBottomTabRoute.params};

{... , key: topmostBottomTabRoute.key}

[Kicu]

I'm also interested in whether this is really a bug? the act of navigating to another screen changes a lot of things and we do reset some things in Search.
Also I don't think anyone was expecting that the selection state persists.

[luacmartins]

This is intended. Closing this issue.

[bernhardoj]

Maybe we can at least persists the selected status bar so it's consistent between web and small screen.

web.mp4

[luacmartins]

I think the idea is to always reset the user. They can use saved searches (coming in v2.3) to navigate to any custom filters they have if they want to.