From f2ff14e3634f5a2578e5c7e84bcd0ebac2047e2f Mon Sep 17 00:00:00 2001
From: v-almonacid <ealmonacid@gmail.com>
Date: Wed, 27 Mar 2024 15:46:16 -0300
Subject: [PATCH 1/2] fix: Can't search for more than one keyword

---
 .../mobile-containers/SuperfeedContainer.tsx  | 40 +++++--------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/mobile-containers/SuperfeedContainer.tsx b/packages/frontend/src/mobile-containers/SuperfeedContainer.tsx
index 36bb9b60..de1e6901 100644
--- a/packages/frontend/src/mobile-containers/SuperfeedContainer.tsx
+++ b/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,22 +217,12 @@ 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,
@@ -250,7 +230,7 @@ const SuperfeedContainer: FC<{
             label: tagName,
             value: tagName,
         }));
-    }, [tagsFromSearch, flattenedKeywordResults]);
+    }, [tagsFromSearch]);
 
     return (
         <AudioPlayerProvider>

From f4c0863b332e1df3ee6f7ae099e58da96bc342d5 Mon Sep 17 00:00:00 2001
From: v-almonacid <ealmonacid@gmail.com>
Date: Wed, 27 Mar 2024 22:17:42 -0300
Subject: [PATCH 2/2] misc improvements

---
 .../src/containers/base/BaseContainerOptions.tsx         | 1 -
 .../frontend/src/mobile-components/FilterSearchBar.tsx   | 2 ++
 packages/ui-kit/src/components/search/Searchbar.tsx      | 9 +++++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/containers/base/BaseContainerOptions.tsx b/packages/frontend/src/containers/base/BaseContainerOptions.tsx
index c0c95958..aaee2753 100644
--- a/packages/frontend/src/containers/base/BaseContainerOptions.tsx
+++ b/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={[]}
diff --git a/packages/frontend/src/mobile-components/FilterSearchBar.tsx b/packages/frontend/src/mobile-components/FilterSearchBar.tsx
index 5f96d872..6d99fcff 100644
--- a/packages/frontend/src/mobile-components/FilterSearchBar.tsx
+++ b/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>
diff --git a/packages/ui-kit/src/components/search/Searchbar.tsx b/packages/ui-kit/src/components/search/Searchbar.tsx
index d3a5258e..3989c724 100644
--- a/packages/ui-kit/src/components/search/Searchbar.tsx
+++ b/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>
     );