Search - Search query is empty even though default filters are applied on the Reports page

[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: v9.2.91-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2647/folder/13176922/63278752/1103398303
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows 10, Android
App Component: Search

Action Performed:

Preconditions: New account with a workspace created. Create 2 separate reports, each containing two manual expenses.

Steps:

1. Navigate to https://staging.new.expensify.com/
2. After creating reports with manual expenses, go to "Reports" tab
3. The Reports page defaults to a filtered view (e.g., type:expense action:submit from:me)
   Result: The search bar query is empty even though the Reports page loads with default filters applied.

Expected Result:

The search bar should display the default filter query when the Reports page loads with filters applied.

Actual Result:

The search bar query is empty even though the Reports page loads with default filters applied.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7040722_1767380528583.document_5098129380102637018.mp4

Bug7040722_1767380528578.bandicam_2026-01-02_13-51-21-972.mp4

View all open jobs on GitHub

[melvin-bot]

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

[samranahm]

Proposal

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

When navigating to the Reports page with default filters applied (e.g., via "Submit", "Approve", or "Pay" shortcuts), the search bar query remains empty even though filters like type:expense action:submit from:me are active and shown in the URL. Users expect to see the applied filter query displayed in the search bar.

What is the root cause of that problem?

The root cause is in SearchPageHeaderInput.tsx. The search input value is controlled by a useEffect that only shows the query text when shouldShowSearchQuery is true.

When users navigate to the Reports page via shortcuts (Submit, Approve, Pay, etc.), these create canned search queries with filters, but shouldShowSearchQuery remains false by default. This causes the search bar to display an empty string even though queryText contains the properly formatted filter query string.

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

Lines 111 to 116 in f7265ef

	useEffect(() => {
	const newValue = shouldShowQuery ? queryText : '';
	setTextInputValue(newValue);
	setAutocompleteQueryValue(newValue);
	}, [queryText, shouldShowQuery]);

This only sets the text input value when shouldShowQuery is true, ignoring cases where there's a valid query that should be displayed.

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

We should update the logic in SearchPageHeaderInput.tsx to show the query text whenever it exists and is non-empty, regardless of the shouldShowSearchQuery flag.

In the useEffect that sets the text input value change the condition from:

const newValue = shouldShowQuery ? queryText : '';

To:

const newValue = shouldShowQuery || queryText ? queryText : '';

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

Lines 111 to 116 in f7265ef

	useEffect(() => {
	const newValue = shouldShowQuery ? queryText : '';
	setTextInputValue(newValue);
	setAutocompleteQueryValue(newValue);
	}, [queryText, shouldShowQuery]);

This way, when users navigate to Reports page via shortcuts like "Submit" or "Approve", they'll see the applied filters displayed in the search bar, making it clear what filters are active.

What alternative solutions did you explore? (Optional)

We can Initialize shouldShowSearchQuery to true when there's an existing query on mount

  useEffect(() => {
      if (!hasMountedRef.current && queryText) {
          setSearchContext(true);
      }
  }, [queryText]);

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[TaduJR]

Proposal

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

When navigating to the Reports tab, the page loads with default filters applied (e.g., type:expense action:submit from:me), but the search bar displays as empty instead of showing the active filter query text.

What is the root cause of that problem?

The search input field visibility is controlled by the shouldShowSearchQuery flag stored in Onyx at ONYXKEYS.SEARCH_CONTEXT. This flag determines whether SearchPageHeaderInput displays the query text or shows an empty input.

Root Cause Flow:

1. User clicks "Reports" tab in NavigationTabBar

2. navigateToSearch() is called:
   

   App/src/components/Navigation/NavigationTabBar/index.tsx

   Lines 170 to 214 in 66de3d6

   	const navigateToSearch = useCallback(() => {
   	if (selectedTab === NAVIGATION_TABS.SEARCH) {
   	return;
   	}
   	clearSelectedText();
   	interceptAnonymousUser(() => {
   	startSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB, {
   	name: CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB,
   	op: CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB,
   	});
   	startSpan(CONST.TELEMETRY.SPAN_ON_LAYOUT_SKELETON_REPORTS, {
   	name: CONST.TELEMETRY.SPAN_ON_LAYOUT_SKELETON_REPORTS,
   	op: CONST.TELEMETRY.SPAN_ON_LAYOUT_SKELETON_REPORTS,
   	});
   	const rootState = navigationRef.getRootState() as State<RootNavigatorParamList>;
   	const lastSearchNavigator = rootState.routes.findLast((route) => route.name === NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR);
   	const lastSearchNavigatorState = lastSearchNavigator && lastSearchNavigator.key ? getPreservedNavigatorState(lastSearchNavigator?.key) : undefined;
   	const lastSearchRoute = lastSearchNavigatorState?.routes.findLast((route) => route.name === SCREENS.SEARCH.ROOT);
   	if (lastSearchRoute) {
   	const {q, ...rest} = lastSearchRoute.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.ROOT];
   	const queryJSON = buildSearchQueryJSON(q);
   	if (queryJSON) {
   	const query = buildSearchQueryString(queryJSON);
   	Navigation.navigate(
   	ROUTES.SEARCH_ROOT.getRoute({
   	query,
   	...rest,
   	}),
   	);
   	return;
   	}
   	}
   	const flattenedMenuItems = typeMenuSections.flatMap((section) => section.menuItems);
   	const defaultActionableSearchQuery =
   	getDefaultActionableSearchMenuItem(flattenedMenuItems)?.searchQuery ?? flattenedMenuItems.at(0)?.searchQuery ?? typeMenuSections.at(0)?.menuItems.at(0)?.searchQuery;
   	const savedSearchQuery = Object.values(savedSearches ?? {}).at(0)?.query;
   	const lastQueryFromOnyx = lastSearchParams?.queryJSON ? buildSearchQueryString(lastSearchParams.queryJSON) : undefined;
   	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: lastQueryFromOnyx ?? defaultActionableSearchQuery ?? savedSearchQuery ?? buildCannedSearchQuery()}));
   	});
   	}, [selectedTab, typeMenuSections, savedSearches, lastSearchParams?.queryJSON]);

3. Navigation proceeds with default query but does NOT call setSearchContext(true)

4. SearchPageHeaderInput reads shouldShowSearchQuery from Onyx:
   

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

   Lines 73 to 74 in 66de3d6

   	const [searchContext] = useOnyx(ONYXKEYS.SEARCH_CONTEXT, {canBeMissing: true});
   	const shouldShowQuery = searchContext?.shouldShowSearchQuery ?? false;

5. Since setSearchContext(true) was never called, shouldShowSearchQuery remains false/undefined

6. The useEffect sets input value to empty string instead of queryText:
   

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

   Lines 111 to 116 in 66de3d6

   	useEffect(() => {
   	const newValue = shouldShowQuery ? queryText : '';
   	setTextInputValue(newValue);
   	setAutocompleteQueryValue(newValue);
   	}, [queryText, shouldShowQuery]);

Comparison with working flows:

When search works correctly (query is shown), setSearchContext(true) IS called:

• SearchPageHeaderInput submitSearch:
  

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

  Line 211 in 66de3d6

  setSearchContext(true);

• SearchRouter submitSearch:
  

  App/src/components/Search/SearchRouter/SearchRouter.tsx

  Line 298 in 66de3d6

  setSearchContext(true);

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

1. Import setSearchContext from @libs/actions/Search in NavigationTabBar
2. Call setSearchContext(true) before navigating to SEARCH_ROOT in the navigateToSearch function

Changes in src/components/Navigation/NavigationTabBar/index.tsx:

Add import after line 33:

import {setSearchContext} from '@libs/actions/Search';

Add setSearchContext(true) call before each Navigation.navigate in the navigateToSearch function:

After line 195, before line 196:

setSearchContext(true);

After line 211, before line 212:

setSearchContext(true);

Complete diff:

diff --git a/src/components/Navigation/NavigationTabBar/index.tsx b/src/components/Navigation/NavigationTabBar/index.tsx
index 66de3d6618..xxxxxxxxxx 100644
--- a/src/components/Navigation/NavigationTabBar/index.tsx
+++ b/src/components/Navigation/NavigationTabBar/index.tsx
@@ -31,6 +31,7 @@ import getAccountTabScreenToOpen from '@libs/Navigation/helpers/getAccountTabSc
 import isRoutePreloaded from '@libs/Navigation/helpers/isRoutePreloaded';
 import navigateToWorkspacesPage, {getWorkspaceNavigationRouteState} from '@libs/Navigation/helpers/navigateToWorkspacesPage';
 import Navigation from '@libs/Navigation/Navigation';
+import {setSearchContext} from '@libs/actions/Search';
 import {buildCannedSearchQuery, buildSearchQueryJSON, buildSearchQueryString} from '@libs/SearchQueryUtils';
 import {getDefaultActionableSearchMenuItem} from '@libs/SearchUIUtils';
 import {startSpan} from '@libs/telemetry/activeSpans';
@@ -193,6 +194,7 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloati
                 const queryJSON = buildSearchQueryJSON(q);
                 if (queryJSON) {
                     const query = buildSearchQueryString(queryJSON);
+                    setSearchContext(true);
                     Navigation.navigate(
                         ROUTES.SEARCH_ROOT.getRoute({
                             query,
@@ -209,6 +211,7 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloati

             const savedSearchQuery = Object.values(savedSearches ?? {}).at(0)?.query;
             const lastQueryFromOnyx = lastSearchParams?.queryJSON ? buildSearchQueryString(lastSearchParams.queryJSON) : undefined;
+            setSearchContext(true);
             Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: lastQueryFromOnyx ?? defaultActionableSearchQuery ?? savedSearchQuery ?? buildCannedSearchQuery()}));
         });
     }, [selectedTab, typeMenuSections, savedSearches, lastSearchParams?.queryJSON]);

[TaduJR]

I think the expected result might be not correct.

Thoughts @JmillsExpensify @situchan since you have context on #75087