[Due for payment 2026-07-16] [CFI] [$250] Add the global search bar to the spend page

[JS00001]

Coming from https://github.com/Expensify/Expensify/issues/636268, lets make the following changes in this issue:

1. Add the 🔍 icon to the top right of the Spend page (like the rest of the pages in the app). This will make it consistent across screens. This will act as the router for the search page.
2. We need to make the following changes to the search bar on the 'spend' page:
3. Turn the search bar into a keyword search only. This should maintain the current filters, and search type that are currently applied, but update the keyword: filter
4. Clicking the X in the keyword search input re-executes the search minus the keywords, but leaves the rest of the filters of the current search in place. (That way, it doesn’t “jump” back to Spend > Expenses every time as the default, but does clear whatever keyword filtering on the table you did).

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022063968232784055750
• Upwork Job ID: 2063968232784055750
• Last Price Increase: 2026-06-08

Issue Owner

Current Issue Owner: @Ollyws

[melvin-bot]

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

[melvin-bot]

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

[godzillaxbox19982014-lgtm]

Proposal

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

Add the global search bar to the spend page

What is the root cause of that problem?

I traced this to the path that handles search router:

• src/pages/Search/AdvancedSearchFilters.tsx:30 (AdvancedSearchFilters): buildFilterQueryWithSortDefaults,
• src/pages/Search/AdvancedSearchFilters.tsx:613 (buildFilterQueryWithSortDefaults): buildFilterQueryWithSortDefaults(
• src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx:90 (if): if (filterKey === CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX) {
• The local evidence matches this recurring failure shape: UI sentinel values are serialized as literal search tokens instead of semantic predicates. Here, src/pages/Search/AdvancedSearchFilters.tsx:30 and src/pages/Search/AdvancedSearchFilters.tsx:613 do not agree on the same search router value, so the user-visible path can show a missing or stale state even though nearby data already has the needed context.

The search/filter value ledger needs to stay explicit:

• User action: Add the global search bar to the spend page
• UI/form value: the first referenced Search UI path (src/pages/Search/AdvancedSearchFilters.tsx:30) creates the visible filter/chip state.
• Query/navigation value: the adjacent parser or query builder (src/pages/Search/AdvancedSearchFilters.tsx:613) must serialize the same semantic value, not only the display label.
• Result semantics: the search result selector/API must consume that semantic value consistently.
• Reverse/display path: saved URL/query parsing must reopen the same advanced filter and chip state, so the fix is not one-way only.

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

• Update src/pages/Search/AdvancedSearchFilters.tsx:30 to derive search router from the search/saved-view state that owns this flow before the value is consumed.
• Carry the same normalized value through src/pages/Search/AdvancedSearchFilters.tsx:613; that follows the safer family move to write the value ledger before proposing: user action -> UI/form value -> serialized query/navigation token -> search/API meaning -> stored data shape -> reverse parser/display path, so the write/optimistic/read paths agree instead of only changing the visible component.
• Keep the change inside the Search, Filters, Grouping, Autocomplete surface and avoid changing large result lists, saved search URLs.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Add or update a regression in tests/unit/Search*.ts for the exact issue flow: Add the global search bar to the spend page.
2. Cover the counter-case near src/pages/Search/AdvancedSearchFilters.tsx:30 so valid existing search router behavior still works.
3. Manually repeat the issue steps after the patch and confirm the visible state/action is no longer stale.

What alternative solutions did you explore? (Optional)

• I would not add a broad new condition outside these referenced paths; the safer fix is to keep search router consistent at the first read/write boundary shown above.

[trasnake87]

Proposal

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

The Spend page (Search tab) doesn't display a search icon in the top right like other pages in the app, making the interface inconsistent. Users should be able to quickly access the search router from the Spend page with their current search query pre-filled, so they can refine or modify their search without losing context.

What is the root cause of that problem?

SearchPageHeaderNarrow.tsx and SearchPageHeaderWide.tsx both render a TopBar with shouldDisplaySearch={false} (lines 25 and 37 respectively), which hides the search button. Additionally, the standard SearchButton component doesn't pass the current search context, so enabling it alone wouldn't pre-fill the search with the current query as requested.

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

Create a custom search button in both header components that passes the current search query to the search router. This approach:

1. Displays the search icon consistently across all pages
2. Pre-fills the search router with the active search query when clicked
3. Preserves the current search type and filters

For SearchPageHeaderNarrow.tsx:

Replace the TopBar configuration to create a custom search button that passes the current query:

import React from 'react';
import Icon from '@components/Icon';
import {PressableWithoutFeedback} from '@components/Pressable';
import TopBar from '@components/Navigation/TopBar';
import Tooltip from '@components/Tooltip';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import type {SearchQueryJSON} from '@components/Search/types';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {buildSearchQueryString} from '@libs/SearchQueryUtils';
import {startSpan} from '@libs/telemetry/activeSpans';
import {useSearchRouterActions} from '@components/Search/SearchRouter/SearchRouterContext';
import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow';

// ... rest of imports

function SearchPageHeaderNarrow({queryJSON, shouldShowLoadingBar = false, isMobileSelectionModeEnabled, cancelSearch}: SearchPageHeaderNarrowProps) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();
    const theme = useTheme();
    const {openSearchRouter} = useSearchRouterActions();
    const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass']);

    if (isMobileSelectionModeEnabled) {
        return <SearchSelectedNarrow queryJSON={queryJSON} />;
    }

    const handleSearchPress = () => {
        startSpan('open_search_router', {
            name: 'open_search_router',
            op: 'open_search_router',
            attributes: {trigger: 'button'},
        });
        const currentQuery = buildSearchQueryString(queryJSON);
        openSearchRouter(currentQuery);
    };

    const searchButton = (
        <Tooltip text={translate('common.search')}>
            <PressableWithoutFeedback
                testID="searchButton"
                accessibilityLabel={translate('common.search')}
                role="button"
                style={[styles.flexRow, styles.touchableButtonImage]}
                onPress={handleSearchPress}
            >
                <Icon src={expensifyIcons.MagnifyingGlass} fill={theme.icon} />
            </PressableWithoutFeedback>
        </Tooltip>
    );

    return (
        <TopBar
            shouldShowLoadingBar={shouldShowLoadingBar}
            breadcrumbLabel={translate('common.spend')}
            shouldDisplaySearch={false}
            shouldDisplayHelpButton
            cancelSearch={cancelSearch}
        >
            {searchButton}
        </TopBar>
    );
}

For SearchPageHeaderWide.tsx:

Apply the same pattern to render the custom search button within the TopBar's children prop.

[innolope-dev]

Your organization has disabled Claude subscription access for Claude Code · Use an Anthropic API key instead, or ask your admin to enable access

[KJ21-ENG]

Proposal

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

The Spend page header is missing the global search icon that the rest of the app shows. When users open the global Search Router from Spend, it should also start from the query that is currently powering the Spend page so the router makes the active search type/filters obvious instead of opening as a blank generic search.

What is the root cause of that problem?

The Spend page header components explicitly suppress the shared TopBar search button. Both narrow and wide Spend headers pass shouldDisplaySearch={false}, so TopBar never renders the existing SearchButton in this route.

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

Lines 21 to 28 in eaaffe3

	return (
	<TopBar
	shouldShowLoadingBar={shouldShowLoadingBar}
	breadcrumbLabel={translate('common.spend')}
	shouldDisplaySearch={false}
	shouldDisplayHelpButton
	cancelSearch={cancelSearch}
	/>

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

Lines 33 to 39 in eaaffe3

	return (
	<TopBar
	shouldShowLoadingBar={false}
	breadcrumbLabel={title}
	shouldDisplaySearch={false}
	shouldDisplayHelpButton
	/>

The shared SearchButton also opens the router without any caller-supplied initial query, and SearchRouter always initializes its visible input state to an empty string. That is why simply enabling the icon would show a blank router instead of pre-filling it from the Spend page's current query.

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

Lines 21 to 44 in eaaffe3

	function SearchButton({style, shouldUseAutoHitSlop = false}: SearchButtonProps) {
	const styles = useThemeStyles();
	const theme = useTheme();
	const {translate} = useLocalize();
	const {openSearchRouter} = useSearchRouterActions();
	const pressableRef = useRef<View>(null);
	const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass']);
	const onPress = () => {
	callFunctionIfActionIsAllowed(() => {
	pressableRef.current?.blur();
	startSpan(CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER, {
	name: CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER,
	op: CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER,
	attributes: {
	[CONST.TELEMETRY.ATTRIBUTE_TRIGGER]: 'button',
	},
	});
	startSearchPageVisibleSpan();
	openSearchRouter();
	})();

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

Lines 80 to 85 in eaaffe3

	// The actual input text that the user sees
	const [textInputValue, , setTextInputValue] = useDebouncedState('', 500);
	// The input text that was last used for autocomplete; needed for the SearchAutocompleteList when browsing list via arrow keys
	const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(textInputValue);
	const [selection, setSelection] = useState({start: textInputValue.length, end: textInputValue.length});
	const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});

The Spend page already has queryJSON, and the full Spend search input already knows how to convert that queryJSON back into the same user-readable router input text via buildUserReadableQueryString() and a substitutions map.

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

Lines 70 to 110 in eaaffe3

	const queryText = buildUserReadableQueryString({
	queryJSON,
	PersonalDetails: personalDetails,
	reports,
	taxRates,
	cardList: personalAndWorkspaceCards,
	cardFeeds: allFeeds,
	policies,
	currentUserAccountID,
	autoCompleteWithSpace: true,
	translate,
	feedKeysWithCards,
	reportAttributes,
	});
	useEffect(() => {
	hasMountedRef.current = true;
	}, []);
	useEffect(() => {
	const substitutionsMap = buildSubstitutionsMap(
	originalInputQuery,
	personalDetails,
	reports,
	taxRates,
	personalAndWorkspaceCards,
	allFeeds,
	policies,
	currentUserAccountID,
	translate,
	reportAttributes,
	);
	setAutocompleteSubstitutions(substitutionsMap);
	}, [allFeeds, personalAndWorkspaceCards, originalInputQuery, personalDetails, reports, taxRates, policies, currentUserAccountID, translate, reportAttributes]);
	useEffect(() => {
	const newValue = shouldShowQuery ? queryText : '';
	setTextInputValue(newValue);
	setAutocompleteQueryValue(newValue);
	}, [queryText, shouldShowQuery]);

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

Add an optional initial query path to the global Search Router:

1. Extend SearchButton and openSearchRouter so callers can pass an optional initial router query string and substitution map.
2. Store that pending initial state in SearchRouterContextProvider, then pass it into SearchRouter for both the web modal and native search-router page.
3. In SearchRouter, initialize/reset textInputValue, autocompleteQueryValue, selection, and autocompleteSubstitutions from the supplied initial state when the router opens, while preserving the current blank behavior for all callers that do not pass anything.
4. In SearchPageHeaderNarrow and SearchPageHeaderWide, stop forcing shouldDisplaySearch={false} and render/use the search button with the current Spend queryJSON converted to user-readable text. Reuse the existing buildUserReadableQueryString() and buildSubstitutionsMap() logic from useSearchPageInput (ideally extracted into a small shared hook/helper) so the router prefill matches the existing Spend search input and keeps autocomplete substitutions working for reports, policies, cards, feeds, users, and tax rates.
5. Keep the selection-mode header unchanged; when SearchSelectedNarrow is shown, it should not add the global search icon.

This keeps the change scoped to the Spend/search header and router plumbing. It does not change search syntax parsing, saved searches, suggested search definitions, report navigation, or the search API request shape.

What alternative solutions did you explore? (Optional)

I considered just removing shouldDisplaySearch={false} from the Spend headers, but that would only add the icon. The router would still open with textInputValue initialized to '', so it would miss the second requirement to pre-fill with the active Spend query.

I also considered making SearchRouter infer the current Spend query from navigation state directly, but passing the prefill from the Spend header is cleaner: the header already receives the exact queryJSON, and it avoids coupling the global router to one specific route.

At draft time, the only close adjacent issue I found is #92923 ("Update the spend page search input to be "type" aware"). It appears related to the Spend page's inline search input, while this issue is specifically the top-right global Search Router entry point and prefill behavior.

[github-actions]

⚠️ @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.