hide search suggestions on input value (#187)

ApollosProject · Mar 1, 2024 · 58172bb · 58172bb
1 parent 4d491c1
commit 58172bb
Showing 1 changed file with 43 additions and 24 deletions.
diff --git a/packages/web-shared/components/Searchbar/SearchResults.js b/packages/web-shared/components/Searchbar/SearchResults.js
@@ -213,38 +213,57 @@ const SearchResults = ({ autocompleteState, autocomplete }) => {
                   </Box>
                 )}
                 <ul className="aa-List" {...autocomplete.getListProps()}>
-                  {items.map((item, index) => (
-                    <li
-                      key={`${item.objectID ? item.objectID : index}-${collection.source.sourceId}`}
-                      className="aa-Item"
-                      {...autocomplete.getItemProps({
-                        item,
-                        source,
-                      })}
-                    >
-                      {collection.source.sourceId === 'querySuggestionsPlugin' && (
-                        <QuerySuggestionItem
-                          item={item}
-                          autocomplete={autocomplete}
-                          handleActionPress={handleActionPress}
+                  {items.map((item, index) => {
+                    if (
+                      collection.source.sourceId === 'querySuggestionsPlugin' &&
+                      !inputProps.value
+                    ) {
+                      return (
+                        <li
+                          key={`${item.objectID ? item.objectID : index}-${
+                            collection.source.sourceId
+                          }`}
+                          className="aa-Item"
                           {...autocomplete.getItemProps({
                             item,
                             source,
                           })}
-                        />
-                      )}
-                      {collection.source.sourceId === 'recentSearchesPlugin' && (
-                        <PastQueryItem
-                          item={item}
-                          autocomplete={autocomplete}
+                        >
+                          <QuerySuggestionItem
+                            item={item}
+                            autocomplete={autocomplete}
+                            handleActionPress={handleActionPress}
+                            {...autocomplete.getItemProps({
+                              item,
+                              source,
+                            })}
+                          />
+                        </li>
+                      );
+                    } else if (collection.source.sourceId === 'recentSearchesPlugin') {
+                      return (
+                        <li
+                          key={`${item.objectID ? item.objectID : index}-${
+                            collection.source.sourceId
+                          }`}
+                          className="aa-Item"
                           {...autocomplete.getItemProps({
                             item,
                             source,
                           })}
-                        />
-                      )}
-                    </li>
-                  ))}
+                        >
+                          <PastQueryItem
+                            item={item}
+                            autocomplete={autocomplete}
+                            {...autocomplete.getItemProps({
+                              item,
+                              source,
+                            })}
+                          />
+                        </li>
+                      );
+                    }
+                  })}
                 </ul>
               </div>
             );