From 0dd5a559225db0a4d85485cbfc4deb8ea3d069bb Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 15 May 2025 12:45:54 +0200
Subject: [PATCH] fix(search bar): dropdown item wasn't clickable on mobile,
 search bar wouldn't unfocus after searching

---
 src/components/search-bar/search-bar.tsx | 27 +++++++++++++++++-------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index 9eddf2a1..6ac71943 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -42,8 +42,12 @@ const SearchBar = ({ isFocused = false, onExpandoChange }: SearchBarProps) => {
   const isInFeedView = (isInSubplebbitView || isInHomeView || isInAllView || isInModView) && !isInPostPageView;
 
   const currentQuery = searchParams.get('q') || '';
-  const [isInCommunitySearch, setIsInCommunitySearch] = useState(!!currentQuery || isInFeedView);
-  const placeholder = isInCommunitySearch ? t('search_posts') : t('enter_community_address');
+  const [isInCommunitySearch, setIsInCommunitySearch] = useState(() => {
+    if (!!currentQuery) return true;
+    if (isInFeedView) return false;
+    return false; // always default to 'go to a community' in non-feed views
+  });
+  const placeholder = isInCommunitySearch && isInFeedView ? t('search_posts') : t('enter_community_address');
   const [showExpando, setShowExpando] = useState(false);
 
   const searchBarRef = useRef<HTMLFormElement>(null);
@@ -97,8 +101,12 @@ const SearchBar = ({ isFocused = false, onExpandoChange }: SearchBarProps) => {
   );
 
   useEffect(() => {
-    setIsInCommunitySearch(!!searchParams.get('q') || isInFeedView);
-  }, [location.search, isInFeedView, searchParams]);
+    if (!!searchParams.get('q')) {
+      setIsInCommunitySearch(true);
+    } else if (!isInFeedView) {
+      setIsInCommunitySearch(false);
+    }
+  }, [searchParams, isInFeedView]);
 
   useEffect(() => {
     if (isFocused) {
@@ -171,6 +179,8 @@ const SearchBar = ({ isFocused = false, onExpandoChange }: SearchBarProps) => {
       setInputValue('');
       setIsInputFocused(false);
       setActiveDropdownIndex(-1);
+      setShowExpando(false);
+      searchInputRef.current?.blur();
       navigate(`/p/${address}`);
     },
     [navigate, setInputValue, setIsInputFocused, setActiveDropdownIndex],
@@ -249,6 +259,7 @@ const SearchBar = ({ isFocused = false, onExpandoChange }: SearchBarProps) => {
                 key={address}
                 className={`${styles.dropdownItem} ${index === activeDropdownIndex ? styles.activeDropdownItem : ''}`}
                 onClick={() => handleCommunitySelect(address)}
+                onTouchEnd={() => handleCommunitySelect(address)}
                 onMouseEnter={() => setActiveDropdownIndex(index)}
               >
                 {Plebbit.getShortAddress(address)}
@@ -258,16 +269,16 @@ const SearchBar = ({ isFocused = false, onExpandoChange }: SearchBarProps) => {
         </FloatingPortal>
       )}
       <div className={`${styles.infobar} ${showExpando ? styles.slideDown : styles.slideUp} ${!isInFeedView ? styles.lessHeight : ''}`}>
+        <label>
+          <input type='checkbox' checked={!isInCommunitySearch || !isInFeedView} disabled={!isInFeedView} onChange={() => handleCommunitySearchToggle(false)} />
+          {t('go_to_a_community')}
+        </label>
         {isInFeedView && (
           <label>
             <input type='checkbox' checked={isInCommunitySearch} onChange={() => handleCommunitySearchToggle(true)} />
             {t('search_feed_post')}
           </label>
         )}
-        <label>
-          <input type='checkbox' checked={!isInCommunitySearch} disabled={!isInFeedView} onChange={() => handleCommunitySearchToggle(false)} />
-          {t('go_to_a_community')}
-        </label>
       </div>
     </div>
   );