fix: Can't search for more than one keyword

packages/frontend/src/containers/base/BaseContainerOptions.tsx

@@ -126,7 +126,6 @@ const TagsOptions: FC<ITagsOptions> = ({
                 {widget_setting.setting.name}:
             </div>
             <SearchBar
-                initialInputValue={searchState}
                 options={searchState ? options : undefined}
                 updateSearch={false}
                 initialSearchValues={[]}

packages/frontend/src/mobile-components/FilterSearchBar.tsx

@@ -51,6 +51,8 @@ const FilterSearchBar = <T extends TOption>({
                     updateSearch={false}
                     isOptionSelected={isOptionSelected}
                     message={message}
+                    closeMenuOnSelect
+                    autoFocus
                 />
             </span>
         </div>

packages/frontend/src/mobile-containers/SuperfeedContainer.tsx

@@ -51,15 +51,6 @@ const SuperfeedContainer: FC<{
     const { setSearchState, keywordResults, isFetchingKeywordResults } =
         useFilterKeywordSearch();
 
-    const flattenedKeywordResults = useMemo(
-        () =>
-            Object.values(keywordResults ?? {}).reduce(
-                (acc, curr) => [...acc, ...curr],
-                []
-            ),
-        [keywordResults]
-    );
-
     const selectedLocalFilters = useAppSelector(selectedLocalFiltersSelector);
     const selectedSyncedFilters = useAppSelector(selectedSyncedFiltersSelector);
 
@@ -210,15 +201,14 @@ const SuperfeedContainer: FC<{
          *
          * In this case, we want to set the search state to the tags.
          */
-        if (
-            tagsFromSearch &&
-            !flattenedKeywordResults.find((kw) =>
-                tagsFromSearch.includes(kw.slug)
-            )
-        ) {
+        if (tagsFromSearch) {
+            Logger.debug(
+                "Setting search state from search params:",
+                tagsFromSearch
+            );
             setSearchState(tagsFromSearch);
         }
-    }, [tagsFromSearch, flattenedKeywordResults, setSearchState]);
+    }, [tagsFromSearch, setSearchState]);
 
     const keywordOptions = useMemo(
         () => groupedKeywordsAsOptions(keywordResults),
@@ -227,30 +217,20 @@ const SuperfeedContainer: FC<{
 
     const initialSearchValues = useMemo(() => {
         if (!tagsFromSearch) return undefined;
-        const matchedKeywords = tagsFromSearch
-            ?.split(",")
-            .map((tag) => {
-                return flattenedKeywordResults.filter((t) => t.slug === tag)[0];
-            })
-            .filter((kw) => kw)
-            .map((kw) => ({
-                ...kw,
-                label: kw.name,
-                value: kw.slug,
-            }));
-        if (matchedKeywords.length > 0) return matchedKeywords;
         return tagsFromSearch?.split(",").map((tagName, i) => ({
             // this is not accurate, but unfortunately the filter_keywords endpoint doesn't
             // provide good results so there is no guarantee that a superfeed item keyword
-            // exists in the filter_keywords response
+            // exists in the filter_keywords response. Also, the filter_keywords response
+            // only includes results from the current search, but the search bar can include
+            // previously searched keywords.
             id: i,
             name: tagName,
             slug: tagName,
             type: ESupportedFilters.ConceptTags,
             label: tagName,
             value: tagName,
         }));
-    }, [tagsFromSearch, flattenedKeywordResults]);
+    }, [tagsFromSearch]);
 
     return (
         <AudioPlayerProvider>

packages/ui-kit/src/components/search/Searchbar.tsx

@@ -150,10 +150,10 @@ export interface ISearchProps<Option = unknown> {
     trendingOptions?: Option[] | undefined;
     disabled?: boolean;
     placeholder: string;
-    initialInputValue?: string;
     initialSearchValues: Option[];
     closeMenuOnSelect?: boolean;
     updateSearch?: boolean;
+    autoFocus?: boolean;
     isFetchingKeywordResults?: boolean;
     isFetchingTrendingKeywordResults?: boolean;
     showBackdrop?: boolean;
@@ -183,9 +183,9 @@ export const SearchBar = <T,>({
     initialSearchValues,
     closeMenuOnSelect = false,
     updateSearch = true,
+    autoFocus = false,
     componentClassNames,
     customComponents,
-    initialInputValue,
     isFetchingKeywordResults,
     isFetchingTrendingKeywordResults,
     showBackdrop,
@@ -218,6 +218,7 @@ export const SearchBar = <T,>({
         }
     };
 
+    // keep input state on blur
     const handleInputChange = useCallback(
         (value: string, meta: InputActionMeta) => {
             if (["input-blur", "menu-close"].indexOf(meta.action) === -1) {
@@ -315,7 +316,7 @@ export const SearchBar = <T,>({
             <Select
                 onFocus={() => setIsFocused(true)}
                 onBlur={() => setIsFocused(false)}
-                autoFocus
+                autoFocus={autoFocus}
                 onChange={(e, changeType) => handleSearchValues(e, changeType)}
                 onInputChange={handleInputChange}
                 isClearable
@@ -341,7 +342,7 @@ export const SearchBar = <T,>({
                 onKeyDown={(e) => {
                     handleKeyDown(e);
                 }}
-                inputValue={initialInputValue}
+                inputValue={inputValue}
             />
         </div>
     );