[Due for payment 2025-12-31] Don't inject search syntax into the NewDot search field unless the user explicitly enters it

[jamesdeanexpensify]

Background

Coming from this convo, we'd like to make the search bar cleaner when the user is clicking around and filtering within the Reports page of NewDot.

Details

When you click around the different sections of the Reports page in NewDot, you notice that different search syntaxes populate in the search field, like so:

2025-11-13_11-49-43.copy.mp4

The syntaxes also populate when you set filters manually, like so:

2025-11-13_11-51-52.mp4

Expected result

We don't want the search field to populate with syntaxes in these cases. It should instead stay completely empty for a cleaner experience. The only case where we want search syntax in the search field is when the user enters it manually. Thanks!

cc @JmillsExpensify @trjExpensify

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO. Remember to draft any necessary HelpDot updates by following the instructions here.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[TaduJR]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-13 23:53:44 UTC.

Proposal

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

When users navigate between different sections of the Reports page (All, Approved, Processing, etc.) or apply filters using filter chips, the search field automatically populates with search syntax (e.g., "type:expense-report", "type:expense status:paid,unreported"). This creates a cluttered user experience. We want the search field to remain empty during these programmatic navigations and only display query text when the user manually types and submits a search.

What is the root cause of that problem?

The root cause is that the SearchPageHeaderInput component cannot distinguish between:

1. User-initiated searches - when a user manually types a query and submits it (field SHOULD show the query)
2. Programmatic navigation - when clicking sidebar sections or applying filter chips (field should NOT show the query)

Currently, the component tries to detect this using a heuristic that analyzes the query string for "user-entered keywords" (tokens that aren't recognized filter keys). This approach is fundamentally flawed because:

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

Lines 75 to 94 in a15e21d

	// The input text that was last used for autocomplete; needed for the SearchAutocompleteList when browsing list via arrow keys
	const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(isDefaultQuery ? '' : queryText);
	const [selection, setSelection] = useState({start: textInputValue.length, end: textInputValue.length});
	const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
	const [isAutocompleteListVisible, setIsAutocompleteListVisible] = useState(false);
	const listRef = useRef<SelectionListHandle>(null);
	const textInputRef = useRef<AnimatedTextInputRef>(null);
	const hasMountedRef = useRef(false);
	const isFocused = useIsFocused();
	const {registerSearchPageInput} = useSearchRouterContext();
	useEffect(() => {
	hasMountedRef.current = true;
	}, []);
	// useEffect for blurring TextInput when we cancel SearchRouter interaction on narrow layout
	useEffect(() => {
	if (!displayNarrowHeader || !!searchRouterListVisible || !textInputRef.current || !textInputRef.current.isFocused()) {
	return;

The heuristic attempts to parse query tokens and identify non-filter terms, but this is unreliable:

• Both manual and programmatic searches can contain the same filter structures
• A query like "type:expense keyword:laptop" could come from either source
• The query structure alone cannot reveal user intent

The component updates the display whenever queryText changes:

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

Lines 127 to 144 in a15e21d

	const onFocus = useCallback(() => {
	onSearchRouterFocus?.();
	listRef.current?.updateAndScrollToFocusedIndex(0);
	setShowPopupButton(false);
	// eslint-disable-next-line react-compiler/react-compiler
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);
	const handleSearchAction = useCallback(
	(value: string) => {
	// Skip calling handleSearch on the initial mount
	if (!hasMountedRef.current) {
	return;
	}
	handleSearch(value);
	},
	[handleSearch],

This reactive pattern causes the field to populate on every navigation, regardless of source.

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

The solution is to explicitly track navigation intent at the source by adding a source route parameter that indicates whether the navigation was user-initiated or programmatic.

1. Update ROUTES.ts to accept source parameter

App/src/ROUTES.ts

Lines 57 to 62 in a15e21d

	SEARCH_ROOT: {
	route: 'search',
	getRoute: ({query, name}: {query: SearchQueryString; name?: string}) => {
	return `search?q=${encodeURIComponent(query)}${name ? `&name=${name}` : ''}` as const;
	},
	},

Change:

SEARCH_ROOT: {
    route: 'search',
    getRoute: ({query, name, source}: {query: SearchQueryString; name?: string; source?: 'user' | 'navigation'}) => {
        const params = [`q=${encodeURIComponent(query)}`];
        if (name) {
            params.push(`name=${name}`);
        }
        if (source) {
            params.push(`source=${source}`);
        }
        return `search?${params.join('&')}` as const;
    },
},

2. Update sidebar navigation to include source

SearchTypeMenu.tsx - When users click sidebar sections:

App/src/pages/Search/SearchTypeMenu.tsx

Lines 240 to 244 in a15e21d

	const onPress = singleExecution(() => {
	clearAllFilters();
	clearSelectedTransactions();
	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item.searchQuery}));
	});

Change:

const onPress = singleExecution(() => {
    clearAllFilters();
    clearSelectedTransactions();
    Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item.searchQuery, source: 'navigation'}));
});

3. Update filter navigation to preserve user search state

SearchFiltersBar.tsx - When users apply filters via chips, we need to preserve whether the user has manually searched:

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

Lines 256 to 260 in a15e21d

	const queryString = buildQueryStringFromFilterFormValues(updatedFilterFormValues);
	close(() => {
	Navigation.setParams({q: queryString});
	});

Change:

Add imports and route reading:

import {useIsFocused, useRoute} from '@react-navigation/native';
import type {RouteProp} from '@react-navigation/native';

// In the component:
const route = useRoute<RouteProp<{params: {source?: 'user' | 'navigation'}}>>();
const currentSource = route.params?.source;

Update the filter application logic:

const queryString = buildQueryStringFromFilterFormValues(updatedFilterFormValues);

close(() => {
    // Preserve the source if user has manually searched, otherwise mark as navigation
    const source = currentSource === 'user' ? 'user' : 'navigation';
    Navigation.setParams({q: queryString, source});
});

This ensures that if a user has manually entered a search query, applying filters will maintain source: 'user' so the search field continues to show the query text with the new filters added.

4. Update manual search submission to include source

SearchPageHeaderInput.tsx - When users manually type and submit:

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

Lines 207 to 214 in a15e21d

	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));
	hideSearchRouterList?.();
	setIsAutocompleteListVisible(false);
	if (updatedQuery !== originalInputQuery) {
	clearAllFilters();
	setTextInputValue('');
	setAutocompleteQueryValue('');
	}

Change:

Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery, source: 'user'}));
hideSearchRouterList?.();
setIsAutocompleteListVisible(false);
if (updatedQuery !== originalInputQuery) {
    clearAllFilters();
}

5. Update SearchRouter (Cmd+K) to include source

SearchRouter.tsx - Global search is also user-initiated:

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

Lines 293 to 296 in a15e21d

	backHistory(() => {
	onRouterClose();
	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));
	});

Change:

backHistory(() => {
    onRouterClose();
    Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery, source: 'user'}));
});

6. Update SearchPageHeaderInput to use source parameter

SearchPageHeaderInput.tsx - Replace heuristic with simple source check:

Add import:

import {useIsFocused, useRoute} from '@react-navigation/native';
import type {RouteProp} from '@react-navigation/native';

Replace the complex hasUserEnteredKeywords logic with:

// Get the navigation source to determine if this is a user-initiated search
const route = useRoute<RouteProp<{params: {source?: 'user' | 'navigation'}}>>();
const navigationSource = route.params?.source;

Update the useEffect:

useEffect(() => {
    // Show queryText only if the user explicitly entered it (navigationSource === 'user')
    // Keep it empty for programmatic navigation (sidebar clicks, filter chips)
    const shouldShowQuery = navigationSource === 'user';
    const newValue = shouldShowQuery ? queryText : '';

    setTextInputValue(newValue);
    setAutocompleteQueryValue(newValue);
}, [isDefaultQuery, queryText, navigationSource]);

7. Update saved search navigation

useSearchTypeMenu.tsx - Saved searches are treated as navigation:

Update both navigation calls to include source: 'navigation':

// Line ~99
Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item?.query ?? '', name: item?.name, source: 'navigation'}));

// Line ~172
Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item.searchQuery, source: 'navigation'}));