fix(v2): fix search input blur on desktop (#1874)

facebook · Oct 24, 2019 · 0e66c90 · 0e66c90
1 parent 262dca3
commit 0e66c90
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -48,15 +48,16 @@ const Search = props => {
     }
   }, []);
 
-  const toggleSearchIconClick = useCallback(() => {
-    props.handleSearchBarToggle(!props.isSearchBarExpanded);
-  }, [props.isSearchBarExpanded]);
+  const toggleSearchIconClick = useCallback(
+    e => {
+      if (!searchBarRef.current.contains(e.target)) {
+        searchBarRef.current.focus();
+      }
 
-  useEffect(() => {
-    if (props.isSearchBarExpanded) {
-      searchBarRef.current.focus();
-    }
-  }, [props.isSearchBarExpanded]);
+      props.handleSearchBarToggle(!props.isSearchBarExpanded);
+    },
+    [props.isSearchBarExpanded],
+  );
 
   return isEnabled ? (
     <Fragment>
@@ -78,6 +79,7 @@ const Search = props => {
           {'search-bar-expanded': props.isSearchBarExpanded},
           {'search-bar': !props.isSearchBarExpanded},
         )}
+        onFocus={toggleSearchIconClick}
         onBlur={toggleSearchIconClick}
         ref={searchBarRef}
       />