From 0e66c908a9a8020afe0453f2d6e3b4a7bd124f4f Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 24 Oct 2019 08:00:51 +0300
Subject: [PATCH] fix(v2): fix search input blur on desktop (#1874)

---
 .../src/theme/SearchBar/index.js               | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 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
index abfbe78cd846..c5a5ce661601 100644
--- 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}
       />