diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 08a7e5b8a2410..c51d3fac0f824 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -532,6 +532,9 @@ const ONYXKEYS = { /** Stores the information about the recent searches */ RECENT_SEARCHES: 'nvp_recentSearches', + /** Stores the current search page context (e.g., whether to show the search query) */ + SEARCH_CONTEXT: 'searchContext', + /** Stores recently used currencies */ RECENTLY_USED_CURRENCIES: 'nvp_recentlyUsedCurrencies', @@ -1157,6 +1160,7 @@ type OnyxValuesMapping = { [ONYXKEYS.NVP_TRY_NEW_DOT]: OnyxTypes.TryNewDot; [ONYXKEYS.RECENT_SEARCHES]: Record; [ONYXKEYS.SAVED_SEARCHES]: OnyxTypes.SaveSearch; + [ONYXKEYS.SEARCH_CONTEXT]: OnyxTypes.SearchContext; [ONYXKEYS.RECENTLY_USED_CURRENCIES]: string[]; [ONYXKEYS.ACTIVE_CLIENTS]: string[]; [ONYXKEYS.DEVICE_ID]: string; diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index fdc579d3e1307..d388ed389294b 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -16,14 +16,12 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import Navigation from '@libs/Navigation/Navigation'; +import {setSearchContext} from '@libs/actions/Search'; import scheduleOnLiveMarkdownRuntime from '@libs/scheduleOnLiveMarkdownRuntime'; import {getAutocompleteCategories, getAutocompleteTags, parseForLiveMarkdown} from '@libs/SearchAutocompleteUtils'; -import {buildCannedSearchQuery} from '@libs/SearchQueryUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import type {SubstitutionMap} from './SearchRouter/getQueryWithSubstitutions'; type SearchAutocompleteInputProps = { @@ -181,21 +179,9 @@ function SearchAutocompleteInput({ [currentUserPersonalDetails.displayName, substitutionMap, currencySharedValue, categorySharedValue, tagSharedValue, emailListSharedValue], ); - const clearFilters = useCallback(() => { + const clearInput = useCallback(() => { onSearchQueryChange(''); - - // Check if we are on the search page before clearing query. If we are using the popup search menu, - // then the clear button is ONLY available when the search is *not* saved, so we don't have to navigate - const currentRoute = Navigation.getActiveRouteWithoutParams(); - const isSearchPage = currentRoute === `/${ROUTES.SEARCH_ROOT.route}`; - - if (isSearchPage) { - Navigation.navigate( - ROUTES.SEARCH_ROOT.getRoute({ - query: buildCannedSearchQuery(), - }), - ); - } + setSearchContext(false); }, [onSearchQueryChange]); const inputWidth = isFullWidth ? styles.w100 : {width: variables.popoverWidth}; @@ -258,7 +244,7 @@ function SearchAutocompleteInput({ selection={selection} shouldShowClearButton={!!value && !isSearchingForReports} shouldHideClearButton={false} - onClearInput={clearFilters} + onClearInput={clearInput} /> diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 4174322ce4cc1..86f2c8b133eab 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -25,13 +25,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {navigateToAndOpenReport} from '@libs/actions/Report'; +import {setSearchContext} from '@libs/actions/Search'; import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import {getAllTaxRates} from '@libs/PolicyUtils'; import type {OptionData} from '@libs/ReportUtils'; import {getAutocompleteQueryWithComma, getQueryWithoutAutocompletedPart} from '@libs/SearchAutocompleteUtils'; -import {buildUserReadableQueryString, getQueryWithUpdatedValues, isDefaultExpensesQuery, sanitizeSearchValue} from '@libs/SearchQueryUtils'; +import {buildUserReadableQueryString, getQueryWithUpdatedValues, sanitizeSearchValue} from '@libs/SearchQueryUtils'; import StringUtils from '@libs/StringUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -66,14 +67,15 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]); const [allFeeds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER, {canBeMissing: true}); const {inputQuery: originalInputQuery} = queryJSON; - const isDefaultQuery = isDefaultExpensesQuery(queryJSON); const [currentUserAccountID = -1] = useOnyx(ONYXKEYS.SESSION, {selector: accountIDSelector, canBeMissing: false}); const queryText = buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates, allCards, allFeeds, policies, currentUserAccountID, true); - // The actual input text that the user sees - const [textInputValue, setTextInputValue] = useState(isDefaultQuery ? '' : queryText); + const [searchContext] = useOnyx(ONYXKEYS.SEARCH_CONTEXT, {canBeMissing: true}); + const shouldShowQuery = searchContext?.shouldShowSearchQuery ?? false; + + const [textInputValue, setTextInputValue] = useState(''); // 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 [autocompleteQueryValue, setAutocompleteQueryValue] = useState(''); const [selection, setSelection] = useState({start: textInputValue.length, end: textInputValue.length}); const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState({}); @@ -107,9 +109,11 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo }, [isFocused, registerSearchPageInput, displayNarrowHeader]); useEffect(() => { - setTextInputValue(isDefaultQuery ? '' : queryText); - setAutocompleteQueryValue(isDefaultQuery ? '' : queryText); - }, [isDefaultQuery, queryText]); + const newValue = shouldShowQuery ? queryText : ''; + + setTextInputValue(newValue); + setAutocompleteQueryValue(newValue); + }, [queryText, shouldShowQuery]); useEffect(() => { const substitutionsMap = buildSubstitutionsMap(originalInputQuery, personalDetails, reports, taxRates, allCards, allFeeds, policies, currentUserAccountID); @@ -204,6 +208,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo return; } + setSearchContext(true); Navigation.navigate( ROUTES.SEARCH_ROOT.getRoute({ query: updatedQuery, diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 390dbb4bc9a30..d1af0eb7476e4 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -40,6 +40,7 @@ import Navigation from '@navigation/Navigation'; import type {ReportsSplitNavigatorParamList} from '@navigation/types'; import variables from '@styles/variables'; import {navigateToAndOpenReport, searchInServer} from '@userActions/Report'; +import {setSearchContext} from '@userActions/Search'; import CONST, {CONTINUATION_DETECTION_SEARCH_FILTER_KEYS} from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -294,6 +295,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla backHistory(() => { onRouterClose(); + setSearchContext(true); Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery})); }); diff --git a/src/hooks/useSearchTypeMenu.tsx b/src/hooks/useSearchTypeMenu.tsx index 6bbdb30245aac..c0d603e0b76ef 100644 --- a/src/hooks/useSearchTypeMenu.tsx +++ b/src/hooks/useSearchTypeMenu.tsx @@ -6,6 +6,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu'; import {useSearchContext} from '@components/Search/SearchContext'; import type {SearchQueryJSON} from '@components/Search/types'; import ThreeDotsMenu from '@components/ThreeDotsMenu'; +import {setSearchContext} from '@libs/actions/Search'; import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getAllTaxRates} from '@libs/PolicyUtils'; @@ -119,6 +120,7 @@ export default function useSearchTypeMenu(queryJSON: SearchQueryJSON) { return { ...baseMenuItem, onSelected: () => { + setSearchContext(false); Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item?.query ?? '', name: item?.name})); }, rightComponent: ( @@ -191,6 +193,7 @@ export default function useSearchTypeMenu(queryJSON: SearchQueryJSON) { containerStyle: isSelected ? [{backgroundColor: theme.border}] : undefined, shouldCallAfterModalHide: true, onSelected: singleExecution(() => { + setSearchContext(false); Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item.searchQuery})); }), }); diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index 6d80f72fdfe0a..4638f562a86ce 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -958,6 +958,13 @@ function updateAdvancedFilters(values: Nullable { + setSearchContext(false); Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item?.query ?? '', name: item?.name})); }, rightComponent: ( @@ -255,6 +257,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { const onPress = singleExecution(() => { clearSelectedTransactions(); + setSearchContext(false); Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item.searchQuery})); }); diff --git a/src/types/onyx/SearchContext.ts b/src/types/onyx/SearchContext.ts new file mode 100644 index 0000000000000..5e815cd957a62 --- /dev/null +++ b/src/types/onyx/SearchContext.ts @@ -0,0 +1,7 @@ +/** Model of the search context */ +type SearchContext = { + /** Whether to show the search query in the input field */ + shouldShowSearchQuery: boolean; +}; + +export default SearchContext; diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts index ad4550926ad76..66c8bb7cf026a 100644 --- a/src/types/onyx/index.ts +++ b/src/types/onyx/index.ts @@ -109,6 +109,7 @@ import type ReviewDuplicates from './ReviewDuplicates'; import type {SaveSearch} from './SaveSearch'; import type ScheduleCallDraft from './ScheduleCallDraft'; import type ScreenShareRequest from './ScreenShareRequest'; +import type SearchContext from './SearchContext'; import type SearchResults from './SearchResults'; import type SecurityGroup from './SecurityGroup'; import type SelectedTabRequest from './SelectedTabRequest'; @@ -278,6 +279,7 @@ export type { DomainSettings, SaveSearch, RecentSearchItem, + SearchContext, ImportedSpreadsheet, ImportedSpreadsheetMemberData, Onboarding,