Fix autocomplete for contextual search item

Expensify · Oct 31, 2024 · 2cc15d1 · 2cc15d1
1 parent 1e9929d
commit 2cc15d1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -356,8 +356,8 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
         [autocompleteSubstitutions, onRouterClose, setTextInputValue],
     );
 
-    const updateSubstitutionsMap = (key: string, value: string) => {
-        const substitutions = {...autocompleteSubstitutions, [key]: {value}};
+    const onAutocompleteSuggestionClick = (autocompleteKey: string, autocompleteId: string) => {
+        const substitutions = {...autocompleteSubstitutions, [autocompleteKey]: {value: autocompleteId}};
 
         setAutocompleteSubstitutions(substitutions);
     };
@@ -403,7 +403,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                 autocompleteItems={autocompleteSuggestions}
                 onSearchSubmit={onSearchSubmit}
                 closeRouter={onRouterClose}
-                onAutocompleteSuggestionClick={updateSubstitutionsMap}
+                onAutocompleteSuggestionClick={onAutocompleteSuggestionClick}
                 ref={listRef}
             />
         </View>

diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -61,20 +61,20 @@ type SearchRouterListProps = {
     /** Context present when opening SearchRouter from a report, invoice or workspace page */
     reportForContextualSearch?: OptionData;
 
+    /** Callback to run when user clicks a suggestion item that contains autocomplete data */
+    onAutocompleteSuggestionClick: (autocompleteKey: string, autocompleteId: string) => void;
+
     /** Callback to close and clear SearchRouter */
     closeRouter: () => void;
-
-    /** Callback WIP */
-    onAutocompleteSuggestionClick: (id: string, value: string) => void;
 };
 
 const setPerformanceTimersEnd = () => {
     Timing.end(CONST.TIMING.SEARCH_ROUTER_RENDER);
     Performance.markEnd(CONST.TIMING.SEARCH_ROUTER_RENDER);
 };
 
-function getContextualSearchQuery(reportID: string) {
-    return `${CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE}:${CONST.SEARCH.DATA_TYPES.CHAT} in:${reportID}`;
+function getContextualSearchQuery(reportName: string) {
+    return `${CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE}:${CONST.SEARCH.DATA_TYPES.CHAT} ${CONST.SEARCH.SYNTAX_FILTER_KEYS.IN}:${SearchQueryUtils.sanitizeSearchValue(reportName)}`;
 }
 
 function isSearchQueryItem(item: OptionData | SearchQueryItem): item is SearchQueryItem {
@@ -85,6 +85,13 @@ function isSearchQueryListItem(listItem: UserListItemProps<OptionData> | SearchQ
     return isSearchQueryItem(listItem.item);
 }
 
+function getItemHeight(item: OptionData | SearchQueryItem) {
+    if (isSearchQueryItem(item)) {
+        return 44;
+    }
+    return 64;
+}
+
 function SearchRouterItem(props: UserListItemProps<OptionData> | SearchQueryListItemProps) {
     const styles = useThemeStyles();
 
@@ -146,12 +153,14 @@ function SearchRouterList(
     }
 
     if (reportForContextualSearch && !textInputValue) {
+        const reportQueryValue = reportForContextualSearch.text ?? reportForContextualSearch.alternateText ?? reportForContextualSearch.reportID;
         sections.push({
             data: [
                 {
                     text: `${translate('search.searchIn')} ${reportForContextualSearch.text ?? reportForContextualSearch.alternateText}`,
                     singleIcon: Expensicons.MagnifyingGlass,
-                    searchQuery: getContextualSearchQuery(reportForContextualSearch.reportID),
+                    searchQuery: reportQueryValue,
+                    autocompleteID: reportForContextualSearch.reportID,
                     itemStyle: styles.activeComponentBG,
                     keyForList: 'contextualSearch',
                     searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.CONTEXTUAL_SUGGESTION,
@@ -200,7 +209,13 @@ function SearchRouterList(
                     return;
                 }
                 if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.CONTEXTUAL_SUGGESTION) {
-                    updateSearchValue(`${item.searchQuery} `);
+                    const searchQuery = getContextualSearchQuery(item.searchQuery);
+                    updateSearchValue(`${searchQuery} `);
+
+                    if (item.autocompleteID) {
+                        const autocompleteKey = `${CONST.SEARCH.SYNTAX_FILTER_KEYS.IN}:${item.searchQuery}`;
+                        onAutocompleteSuggestionClick(autocompleteKey, item.autocompleteID);
+                    }
                     return;
                 }
                 if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.AUTOCOMPLETE_SUGGESTION && textInputValue) {
@@ -243,13 +258,6 @@ function SearchRouterList(
         [setTextInputValue, textInputValue, onAutocompleteSuggestionClick],
     );
 
-    const getItemHeight = useCallback((item: OptionData | SearchQueryItem) => {
-        if (isSearchQueryItem(item)) {
-            return 44;
-        }
-        return 64;
-    }, []);
-
     return (
         <SelectionList<OptionData | SearchQueryItem>
             sections={sections}