3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-30 18:58:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

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

* fix(v2): add onMouseOver handler
This commit is contained in:
Alexey Pyltsyn 2020-01-08 18:08:03 +03:00 • committed by Yangshun Tay
parent 7e750de6fa
commit 5252111fa0
1 changed files with 55 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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