fix(v2): remove focus on search input when hovering over it (#2262)

* fix(v2): remove focus on search input when hovering over it * Fix deps * Improve naming
facebook · Feb 1, 2020 · de4a25c · de4a25c
1 parent daa9a6a
commit de4a25c
Showing 1 changed file with 18 additions and 11 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
@@ -22,7 +22,7 @@ const Search = props => {
   } = siteConfig;
   const history = useHistory();
 
-  function initAlgolia() {
+  function initAlgolia(focus) {
     window.docsearch({
       appId: algolia.appId,
       apiKey: algolia.apiKey,
@@ -47,11 +47,12 @@ const Search = props => {
       },
     });
 
-    // Needed because the search input loses focus after calling window.docsearch()
-    searchBarRef.current.focus();
+    if (focus) {
+      searchBarRef.current.focus();
+    }
   }
 
-  const loadAlgolia = () => {
+  const loadAlgolia = (focus = true) => {
     if (algoliaLoaded) {
       return;
     }
@@ -60,12 +61,12 @@ const Search = props => {
       ([{default: docsearch}]) => {
         setAlgoliaLoaded(true);
         window.docsearch = docsearch;
-        initAlgolia();
+        initAlgolia(focus);
       },
     );
   };
 
-  const toggleSearchIconClick = useCallback(() => {
+  const handleSearchIcon = useCallback(() => {
     loadAlgolia();
 
     if (algoliaLoaded) {
@@ -77,7 +78,13 @@ const Search = props => {
 
   const handleSearchInputBlur = useCallback(() => {
     props.handleSearchBarToggle(!props.isSearchBarExpanded);
-  }, [algoliaLoaded]);
+  }, [props.isSearchBarExpanded]);
+
+  const handleSearchInput = useCallback(e => {
+    const needFocus = e.type !== 'mouseover';
+
+    loadAlgolia(needFocus);
+  });
 
   return (
     <div className="navbar__search" key="search-box">
@@ -87,8 +94,8 @@ const Search = props => {
         className={classnames('search-icon', {
           'search-icon-hidden': props.isSearchBarExpanded,
         })}
-        onClick={toggleSearchIconClick}
-        onKeyDown={toggleSearchIconClick}
+        onClick={handleSearchIcon}
+        onKeyDown={handleSearchIcon}
         tabIndex={0}
       />
       <input
@@ -101,8 +108,8 @@ const Search = props => {
           {'search-bar-expanded': props.isSearchBarExpanded},
           {'search-bar': !props.isSearchBarExpanded},
         )}
-        onMouseOver={loadAlgolia}
-        onFocus={loadAlgolia}
+        onMouseOver={handleSearchInput}
+        onFocus={handleSearchInput}
         onBlur={handleSearchInputBlur}
         ref={searchBarRef}
       />