[$250] Spend - "Nothing to show" after clear input

[izarutskaya]

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.3.75-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @mukhrr
Slack conversation (hyperlinked to channel name): #expensify_open_source

Action Performed:

Prerequisites: Have multiple expenses/reports:

1. Go to https://staging.new.expensify.com/
2. Navigate to Spend > Type in search input on Search page
3. Clear input

Expected Result:

User should see all expenses/reports again.

Actual Result:

User sees "Nothing to show"

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Screenshots/Videos

REC-20260515231238.mp4

Recording.3764.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022056360406216627167
• Upwork Job ID: 2056360406216627167
• Last Price Increase: 2026-05-25

[annaweber830]

🚨 Edited by proposal-police: This proposal was edited at 2026-05-18 14:47:59 UTC.

Proposal

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

On the Spend (Search) page, after typing a keyword that returns zero results and pressing the clear button (X) in the search input, the page keeps showing "Nothing to show" instead of returning to the full unfiltered results. The visible input goes blank but the underlying results stay filtered by the cleared-out query.

What is the root cause that causes this issue?

The Search page has two independent pieces of state: the visible input text (local React state inside useSearchPageInput) and the URL q param (which actually drives what the search results show). The clear button only resets the first one.

SearchAutocompleteInput.tsx#L181-L184

const clearInput = () => {
    onSearchQueryChange('');
    setSearchContext(false);
};

onSearchQueryChange('') only clears the local textInputValue state inside useSearchPageInput.tsx#L141-L150. The route's q param still holds the previous keyword, so the Search results subscription (driven off queryJSON parsed from the URL) is never re-fetched against an empty query, and EmptySearchView keeps rendering "Nothing to show".

The reset can't live inside clearInput itself, because SearchAutocompleteInput is also reused by SearchRouter as a global overlay on non-search routes where there is no Search URL to reset. The fix needs to be scoped to the Search-page wrappers that actually own the URL.

Also note submitSearch can't just be reused for the empty-input case — it calls getQueryWithUpdatedValues which early-returns on empty strings (useSearchPageInput.tsx#L120-L124), and it pushes a new history entry via Navigation.navigate, which is wrong when staying on the same page.

What changes do you think we should make to fix the issue?

Add a dedicated onClear path that flows from the page-level wrappers down to the shared input. The shared input fires the callback after its local reset; the page-level hook resets the URL q param in-place to the canned default for the current tab, so the user stays where they were (Trips stays on Trips, etc.).

1. src/components/Search/SearchAutocompleteInput.tsx#L181-L184

Add an optional onClear prop (default undefined so SearchRouter and any other consumer is unaffected) and invoke it from clearInput.

Current code:

const clearInput = () => {
    onSearchQueryChange('');
    setSearchContext(false);
};

Updated code:

const clearInput = () => {
    onSearchQueryChange('');
    setSearchContext(false);
    onClear?.();
};

And add to the prop type alongside the other callbacks in SearchAutocompleteInputProps:

Updated code:

/** Callback invoked when the user clears the input via the clear button */
onClear?: () => void;

Destructure it in the function signature next to onSubmit:

Updated code:

onSubmit = () => {},
onClear,

2. src/components/Search/SearchPageHeader/useSearchPageInput.tsx#L114-L137

Add a clearSearch function that resets the URL params in-place to the default canned query for the current tab. Use Navigation.setParams (replaces the current entry) rather than Navigation.navigate (pushes a new entry). Derive the canned default from queryJSON.type via buildCannedSearchQuery so we don't yank the user from Trips back to All.

Current code:

function submitSearch(queryString: SearchQueryString, shouldSkipAmountConversion = false) {
    const queryWithSubstitutions = getQueryWithSubstitutions(queryString, autocompleteSubstitutions, currentUserAccountID);
    const updatedQuery = getQueryWithUpdatedValues(queryWithSubstitutions, shouldSkipAmountConversion);

    if (!updatedQuery) {
        return;
    }

    setSearchContext(true);
    Navigation.navigate(
        ROUTES.SEARCH_ROOT.getRoute({
            query: updatedQuery,
            rawQuery: shouldSkipAmountConversion ? undefined : queryWithSubstitutions,
        }),
    );
    onSubmit();
    if (updatedQuery !== originalInputQuery) {
        setTextInputValue('');
        setAutocompleteQueryValue('');
    }
}

Updated code:

function submitSearch(queryString: SearchQueryString, shouldSkipAmountConversion = false) {
    const queryWithSubstitutions = getQueryWithSubstitutions(queryString, autocompleteSubstitutions, currentUserAccountID);
    const updatedQuery = getQueryWithUpdatedValues(queryWithSubstitutions, shouldSkipAmountConversion);

    if (!updatedQuery) {
        return;
    }

    setSearchContext(true);
    Navigation.navigate(
        ROUTES.SEARCH_ROOT.getRoute({
            query: updatedQuery,
            rawQuery: shouldSkipAmountConversion ? undefined : queryWithSubstitutions,
        }),
    );
    onSubmit();
    if (updatedQuery !== originalInputQuery) {
        setTextInputValue('');
        setAutocompleteQueryValue('');
    }
}

function clearSearch() {
    Navigation.setParams({
        q: buildCannedSearchQuery({type: queryJSON.type}),
        rawQuery: undefined,
    });
    setSearchContext(false);
}

Import buildCannedSearchQuery from @libs/SearchQueryUtils (it lives next to the already-imported buildUserReadableQueryString) and expose clearSearch in the hook's return object next to submitSearch:

Updated code:

return {
    // ...existing fields
    submitSearch,
    clearSearch,
};

3. src/components/Search/SearchPageHeader/SearchPageInputWide.tsx#L29-L43

Destructure clearSearch from the hook and pass it through SearchInputSelectionWrapper as onClear.

Current code:

const {
    autocompleteSubstitutions,
    autocompleteQueryValue,
    searchQueryItems,
    selection,
    textInputRef,
    textInputValue,
    handleKeyPress,
    handleSearchAction,
    onListItemPress,
    onSearchQueryChange,
    submitSearch,
} = useSearchPageInput({
    queryJSON,
    onSearch: handleSearch,
    onSubmit: () => setIsAutocompleteListVisible(false),
});

Updated code:

const {
    autocompleteSubstitutions,
    autocompleteQueryValue,
    searchQueryItems,
    selection,
    textInputRef,
    textInputValue,
    handleKeyPress,
    handleSearchAction,
    onListItemPress,
    onSearchQueryChange,
    submitSearch,
    clearSearch,
} = useSearchPageInput({
    queryJSON,
    onSearch: handleSearch,
    onSubmit: () => setIsAutocompleteListVisible(false),
});

And add the prop to SearchInputSelectionWrapper (SearchPageInputWide.tsx#L70-L92):

Updated code:

<SearchInputSelectionWrapper
    value={textInputValue}
    onSearchQueryChange={onSearchQueryChange}
    onClear={clearSearch}
    // ...rest unchanged
/>

4. src/components/Search/SearchPageHeader/SearchPageInputNarrow.tsx

Same change as the Wide variant — destructure clearSearch from useSearchPageInput and forward it as the onClear prop on the input wrapper. SearchRouter does not pass onClear, so the global overlay behavior stays exactly as it is today.

5. src/components/Search/SearchInputSelectionWrapper (and any other thin pass-through wrappers between the page input and SearchAutocompleteInput)

Add onClear?: () => void to the prop type and forward it down to SearchAutocompleteInput. Purely a plumbing change — no logic.

[MelvinBot]

Proposal

What is the root cause of that problem?

The search input's clear button (clearInput in SearchAutocompleteInput.tsx:194-197) only clears the visual text and sets shouldShowSearchQuery to false — it does not update the URL q parameter that actually drives search results.

The search results are derived from the route's q param via SearchContext.tsx:99-102, which uses usePreviousDefined to persist the last valid query. So after clearing the input, the old query stays in the URL, the old (possibly empty) results persist, and the user sees "Nothing to show" even though the input appears empty.

In contrast, submitSearch in useSearchPageInput.tsx:120-140 properly calls Navigation.navigate() to update the URL — clearInput needs to do the same.

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

When the user clears the search input, navigate back to the default canned search query so the URL q parameter is reset. The clearInput function should call Navigation.navigate (or Navigation.setParams) with the default query from buildCannedSearchQuery(), similar to how the error recovery path already resets the query at Search/index.tsx:1285.

This ensures that clearing the input resets both the visual state and the underlying search query, returning the user to the default view showing all expenses/reports.

What alternative solutions did you explore? (Optional)

An alternative would be to intercept the empty state in SearchContext and fall back to the default query when shouldShowSearchQuery is false. However, this adds implicit behavior to the context layer. Explicitly navigating on clear is simpler, more predictable, and consistent with how submitSearch already works.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[dilshodmackbook-sketch]

🚨 Edited by proposal-police: This proposal was edited at 2026-05-18 13:07:03 UTC.

Proposal

What is the root cause of that problem?

The Clear (✕) button in SearchAutocompleteInput wipes the visible input value and toggles shouldShowSearchQuery=false, but it never touches the URL's ?q=… param that actually drives the search snapshot — so the underlying query keeps filtering after the input visually looks empty.

The clear handler at https://github.com/Expensify/App/blob/main/src/components/Search/SearchAutocompleteInput.tsx#L194-L197 is just:

const clearInput = () => {
    onSearchQueryChange('');
    setSearchContext(false);
};

The repro path:

1. On /search the URL starts as the canned query (e.g. q=type:expense). shouldShowQuery is false, so the input is blank.
2. The user types test. The "Search for: test" autocomplete item is the first row, so any of these submit it: tapping it (it's the focused row on desktop, picked up by Enter), pressing the iOS/Android keyboard "Search" key (the input is enterKeyHint="search" → onSubmitEditing → submitSearch(textInputValue) at https://github.com/Expensify/App/blob/main/src/components/Search/SearchPageHeader/SearchPageInputWide.tsx#L78-L83), or tapping the suggestion row.
3. submitSearch at https://github.com/Expensify/App/blob/main/src/components/Search/SearchPageHeader/useSearchPageInput.tsx#L120-L140 navigates to /search?q=test type:expense … and sets shouldShowSearchQuery=true. The useEffect at https://github.com/Expensify/App/blob/main/src/components/Search/SearchPageHeader/useSearchPageInput.tsx#L105-L110 then pre-fills the input with the URL's query text, so the ✕ button now shows.
4. The user taps ✕ → clearInput runs → input blanks, shouldShowSearchQuery=false. The URL is still q=test type:expense …, so currentSearchResults (snapshot keyed by that hash) is still the filtered-and-empty result, and EmptySearchView falls into the "results exist but query is non-default" branch at https://github.com/Expensify/App/blob/main/src/pages/Search/EmptySearchView.tsx#L281-L286 / https://github.com/Expensify/App/blob/main/src/pages/Search/EmptySearchView.tsx#L358-L363, rendering search.searchResults.emptyResults.title → "Nothing to show".

The same SearchAutocompleteInput is also used by SearchRouter (an overlay launched from any screen), so we can't just always reset URL params from clearInput — there isn't always a /search URL to reset.

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

I'd give SearchAutocompleteInput an optional onClear hook so the page that owns the URL can reset it, and have the Search-page wrapper pass a handler that re-navigates to the canned query for the current type. Same pattern as the existing reset at https://github.com/Expensify/App/blob/main/src/components/Search/index.tsx#L1402-L1417, just driven by Clear.

In SearchAutocompleteInput.tsx:

-    const clearInput = () => {
-        onSearchQueryChange('');
-        setSearchContext(false);
-    };
+    const clearInput = () => {
+        onSearchQueryChange('');
+        setSearchContext(false);
+        onClear?.();
+    };

(plus adding onClear?: () => void to SearchAutocompleteInputProps and pulling it from props.)

In useSearchPageInput.tsx, expose a clear handler that reverts the URL to the canned default for the active type and return it alongside the existing values so SearchPageInputWide/SearchPageInputNarrow can pass it through to SearchInputSelectionWrapper as onClear:

+    const handleClear = useCallback(() => {
+        const cannedQuery = buildCannedSearchQuery({type: queryJSON.type});
+        if (originalInputQuery === cannedQuery) {
+            return;
+        }
+        Navigation.setParams({q: cannedQuery, rawQuery: undefined});
+    }, [originalInputQuery, queryJSON.type]);

SearchRouter doesn't pass onClear, so its behavior is unchanged. The early-return on equal queries keeps the URL stable when the input was cleared without an active filter (e.g. user typed and immediately cleared without submitting), avoiding a needless setParams and any history churn.

What alternative solutions did you explore? (Optional)

• Detect empty value inside useSearchPageInput.onSearchQueryChange and navigate from there. Avoids the new prop, but onSearchQueryChange('') also fires when the user backspaces the populated query while editing — we'd reset the URL out from under them mid-edit. Distinguishing "explicit clear" from "edit to empty" requires extra signaling anyway, at which point an explicit onClear is cleaner.
• Always call Navigation.setParams from inside clearInput itself (no new prop). Breaks SearchRouter, which mounts the same input on non-/search routes — we'd push a q=… param onto whatever screen the router is overlaid on top of.
• Drive results from textInputValue instead of the URL query when the two diverge. Bypasses the URL as the source of truth, so deep-linking, refresh, and back-navigation would stop reflecting what's on screen. Much larger blast radius than fixing the one missing reset.
• Piggy-back on the existing shouldResetSearchQuery flag at https://github.com/Expensify/App/blob/main/src/components/Search/index.tsx#L1402-L1417 by flipping it from clearInput. That handler only resets when hasErrors is also true, so we'd either have to loosen its guard (regressing the troubleshoot-page flow that's its real consumer) or fork a second flag — at which point a direct setParams is simpler.

Demo

Screen.Recording.2026-05-18.at.18.31.34.mov

[mukhrr]

Proposal

What is the root cause of that problem?

On the Search page, the results list is driven only by the route's q param. The page-level effect in useSearchPageSetup fires the backend search() request exclusively when the query hash changes:

App/src/hooks/useSearchPageSetup.ts

Lines 55 to 72 in 47fee90

	useEffect(() => {
	if (!queryJSON || hash === undefined || shouldUseLiveData || isOffline) {
	return;
	}
	// Must run even on cached snapshots, else SearchTabButton's Onyx fallback restores
	// a stale query after a tab switch (e.g. filter reappears after Reset).
	if (lastSavedSearchHash !== hash) {
	saveLastSearchParams({queryJSON, offset: 0, searchKey: currentSearchKey, hasMoreResults: false, allowPostSearchRecount: false});
	lastSavedSearchHash = hash;
	}
	if (isSnapshotDataLoaded || isSnapshotSearchLoading) {
	return;
	}
	const shouldSkipWaitForWrites = hasDeferredWrite(CONST.DEFERRED_LAYOUT_WRITE_KEYS.SEARCH);
	search({queryJSON, searchKey: currentSearchKey, offset: 0, shouldCalculateTotals, isLoading: false, skipWaitForWrites: shouldSkipWaitForWrites});
	}, [hash, isOffline, shouldUseLiveData, queryJSON, isSnapshotDataLoaded, isSnapshotSearchLoading, currentSearchKey, shouldCalculateTotals]);

When you clear the input via the clear ("x") button, clearInput runs. It only resets local input state and flips the shouldShowSearchQuery context flag — it never navigates or re-submits a query, so the route hash never changes and the effect above never fires another request:

App/src/components/Search/SearchAutocompleteInput.tsx

Lines 194 to 197 in 47fee90

	const clearInput = () => {
	onSearchQueryChange('');
	setSearchContext(false);
	};

And even a path that did submit the empty value can't recover, because submitSearch early-returns on a falsy updatedQuery before it ever calls Navigation.navigate:

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

Lines 120 to 140 in 47fee90

	function submitSearch(queryString: SearchQueryString, shouldSkipAmountConversion = false) {
	const queryWithSubstitutions = getQueryWithSubstitutions(queryString, autocompleteSubstitutions, currentUserAccountID);
	const updatedQuery = getQueryWithUpdatedValues(queryWithSubstitutions, shouldSkipAmountConversion);
	if (!updatedQuery) {
	return;
	}
	setSearchContext(true);
	Navigation.navigate(
	ROUTES.SEARCH_ROOT.getRoute({
	query: updatedQuery,
	rawQuery: shouldSkipAmountConversion ? undefined : queryWithSubstitutions,
	}),
	);
	onSubmit();
	if (updatedQuery !== originalInputQuery) {
	setTextInputValue('');
	setAutocompleteQueryValue('');
	}
	}

So clearing the input leaves the route query untouched, fires no backend request, and setSearchContext(false) blanks the displayed query — the user is left on an empty page even though expenses exist.

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

Instead of bailing on an empty query, submitSearch should fall back to the default (canned) query for the active tab, so the route hash changes and useSearchPageSetup issues a fresh search():

-        if (!updatedQuery) {
-            return;
-        }
-
-        setSearchContext(true);
+        // When the query is cleared/empty, fall back to the default search for the current tab.
+        const finalQuery = updatedQuery || buildCannedSearchQuery({type: queryJSON.type});
+
+        setSearchContext(true);
         Navigation.navigate(
             ROUTES.SEARCH_ROOT.getRoute({
-                query: updatedQuery,
-                rawQuery: shouldSkipAmountConversion ? undefined : queryWithSubstitutions,
+                query: finalQuery,
+                rawQuery: shouldSkipAmountConversion || !updatedQuery ? undefined : queryWithSubstitutions,
             }),
         );

Then route the clear button through this path. Add an optional onClear prop to the shared SearchAutocompleteInput and call it from clearInput (falling back to the existing setSearchContext(false) so the global SearchRouter is unchanged):

 const clearInput = () => {
     onSearchQueryChange('');
-    setSearchContext(false);
+    if (onClear) {
+        onClear();
+        return;
+    }
+    setSearchContext(false);
 };

On the Search page inputs (SearchPageInputWide/SearchPageInputNarrow), pass onClear={() => submitSearch('')}. Pressing "x" now re-runs the default search, the route hash changes, the backend request fires, and the full expense list reloads instead of showing an empty page.

What alternative solutions did you explore? (Optional)

• Relax the empty-query guard in the autocomplete debounce (SearchAutocompleteList's if (!handleSearch || !autocompleteQueryWithoutFilters) return;). Rejected: that path leads to searchInServer → performServerSearch, which itself intentionally no-ops on empty input, so it would not reload the Search page results — the results list is driven by the route/useSearchPageSetup, not by the autocomplete server search.
• Re-fire search() directly from clearInput. Rejected: it would duplicate query-build/normalization logic and bypass the single source of truth (route q → useSearchPageSetup), risking the displayed query and results drifting out of sync.

Demo:

demo-search-input-clear.mp4

[KJ21-ENG]

Proposal

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

After using the Spend page search input and then pressing the clear button, the visible input is cleared but the Spend search results can remain filtered, so the page shows "Nothing to show" instead of the normal expenses/reports list.

What is the root cause of that problem?

The Search page input clear action only clears the local text input state and hides the query display context. SearchAutocompleteInput.clearInput() calls onSearchQueryChange('') and setSearchContext(false), but it does not update the Search route's q param or run a new Search request.

On the Search page, useSearchPageInput() owns the local textInputValue, while the actual result list is driven by currentSearchQueryJSON, which comes from the route/query state. When the user searches for a term that produces no Spend results and then clears the input, the UI text becomes empty, but the underlying queryJSON can still include the previous keyword filter. Since SearchPage / Search keep rendering results for that stale hash, the empty filtered response remains visible as "Nothing to show".

Relevant code paths:

• src/components/Search/SearchAutocompleteInput.tsx clears only input/context in clearInput().
• src/components/Search/SearchPageHeader/useSearchPageInput.tsx stores the page input in local state and only navigates on submit.
• src/pages/Search/SearchPage.tsx renders results from currentSearchQueryJSON / currentSearchResults, not from the local input string.

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

Make the Search page clear action reset the actual Search query, not just the displayed input.

Concretely:

1. Add an optional clear callback to SearchAutocompleteInput (or thread an explicit onClearInput through SearchInputSelectionWrapper) so generic search inputs can keep their existing local-only clear behavior.
2. In useSearchPageInput(), provide a Search-page-specific clear handler that:
   • clears textInputValue and autocompleteQueryValue,
   • clears/updates autocomplete substitutions,
   • calls setSearchContext(false),
   • navigates to the unfiltered canned query for the current Spend type, e.g. ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery({type: queryJSON.type})}) for the simple keyword-search case.
3. If we want to preserve non-keyword filters in a filtered search, build the reset query by removing only the keyword/free-text filters from the current queryJSON and then call buildSearchQueryString() / getQueryWithUpdatedValues() before navigating. For this issue's repro, resetting to the current type's default query is sufficient because the user only typed into the search box.

This keeps the clear button aligned with the user's expectation: once the input is empty, the data source behind the Spend list is also the unfiltered/default Spend query.

Scope boundaries: this should be limited to the Search page input clear path and should not change how autocomplete suggestions are generated, how the global SearchRouter submits searches, how filter dropdowns work, or how Search result rows render.

What alternative solutions did you explore? (Optional)

Only calling searchInServer('') would not fix the result list because that helper is for report/user autocomplete suggestions and intentionally returns early for blank input. Clearing SEARCH_CONTEXT alone is also insufficient because it controls whether the query is shown in the input, not the actual search result query/hash.

[melvin-bot]

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

[melvin-bot]

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

⚠️ @KJ21-ENG Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.