fix(v2): fix input losing focus on init (#2188)

* fix(v2): fix input losing focus on init

* fix(v2): add onMouseOver handler

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useRef, useCallback} from 'react';
+import React, {useState, useRef, useCallback} from 'react';
 import classnames from 'classnames';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -13,10 +13,8 @@ import {useHistory} from '@docusaurus/router';
 
 import './styles.css';
 
-let loaded = false;
-
 const Search = props => {
-  const initialized = useRef(false);
+  const [algoliaLoaded, setAlgoliaLoaded] = useState(false);
   const searchBarRef = useRef(null);
   const {siteConfig = {}} = useDocusaurusContext();
   const {
@@ -24,8 +22,7 @@ const Search = props => {
   } = siteConfig;
   const history = useHistory();
 
-  function initAlgolia(focusOnInit) {
-    if (!initialized.current) {
+  function initAlgolia() {
     window.docsearch({
       appId: algolia.appId,
       apiKey: algolia.apiKey,
@@ -49,38 +46,38 @@ const Search = props => {
         history.push(routePath);
       },
     });
-      initialized.current = true;
+
     // Needed because the search input loses focus after calling window.docsearch()
-      if (focusOnInit) {
     searchBarRef.current.focus();
   }
-    }
+
+  const loadAlgolia = () => {
+    if (algoliaLoaded) {
+      return;
     }
 
-  function loadAlgolia(focusAfterLoading) {
-    if (!loaded) {
     Promise.all([import('docsearch.js'), import('./algolia.css')]).then(
       ([{default: docsearch}]) => {
-          loaded = true;
+        setAlgoliaLoaded(true);
         window.docsearch = docsearch;
-          initAlgolia(focusAfterLoading);
+        initAlgolia();
       },
     );
-    } else {
-      initAlgolia(focusAfterLoading);
-    }
-  }
+  };
 
-  const toggleSearchIconClick = useCallback(
-    event => {
-      if (!searchBarRef.current.contains(event.target)) {
+  const toggleSearchIconClick = useCallback(() => {
+    loadAlgolia();
+
+    if (algoliaLoaded) {
       searchBarRef.current.focus();
     }
 
     props.handleSearchBarToggle(!props.isSearchBarExpanded);
-    },
-    [props.isSearchBarExpanded],
-  );
+  }, [props.isSearchBarExpanded]);
+
+  const handleSearchInputBlur = useCallback(() => {
+    props.handleSearchBarToggle(!props.isSearchBarExpanded);
+  }, [algoliaLoaded]);
 
   return (
     <div className="navbar__search" key="search-box">
@@ -104,10 +101,9 @@ const Search = props => {
           {'search-bar-expanded': props.isSearchBarExpanded},
           {'search-bar': !props.isSearchBarExpanded},
         )}
-        onClick={loadAlgolia.bind(this, true)}
-        onMouseOver={loadAlgolia.bind(this, false)}
-        onFocus={toggleSearchIconClick}
-        onBlur={toggleSearchIconClick}
+        onMouseOver={loadAlgolia}
+        onFocus={loadAlgolia}
+        onBlur={handleSearchInputBlur}
         ref={searchBarRef}
       />
     </div>