3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-15 01:02:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): make search bar not lose focus after clicking on it after initial load (#2178)

Browse source
This commit is contained in:
Yangshun Tay 2020-01-04 20:38:45 +08:00 • committed by GitHub
parent d8b170ee51
commit 8065e5f9dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,7 @@ const Search = props => {
} = siteConfig; } = siteConfig;
const history = useHistory(); const history = useHistory();
const initAlgolia = () => { function initAlgolia(focusOnInit) {
if (!initialized.current) { if (!initialized.current) {
window.docsearch({ window.docsearch({
appId: algolia.appId, appId: algolia.appId,
@ -50,26 +50,30 @@ const Search = props => {
}, },
}); });
initialized.current = true; initialized.current = true;
// Needed because the search input loses focus after calling window.docsearch()
if (focusOnInit) {
searchBarRef.current.focus();
}
} }
}; }
const loadAlgolia = () => { function loadAlgolia(focusAfterLoading) {
if (!loaded) { 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; loaded = true;
window.docsearch = docsearch; window.docsearch = docsearch;
initAlgolia(); initAlgolia(focusAfterLoading);
}, },
); );
} else { } else {
initAlgolia(); initAlgolia(focusAfterLoading);
} }
}; }
const toggleSearchIconClick = useCallback( const toggleSearchIconClick = useCallback(
e => { event => {
if (!searchBarRef.current.contains(e.target)) { if (!searchBarRef.current.contains(event.target)) {
searchBarRef.current.focus(); searchBarRef.current.focus();
} }
@ -100,8 +104,8 @@ const Search = props => {
{'search-bar-expanded': props.isSearchBarExpanded}, {'search-bar-expanded': props.isSearchBarExpanded},
{'search-bar': !props.isSearchBarExpanded}, {'search-bar': !props.isSearchBarExpanded},
)} )}
onClick={loadAlgolia} onClick={loadAlgolia.bind(this, true)}
onMouseOver={loadAlgolia} onMouseOver={loadAlgolia.bind(this, false)}
onFocus={toggleSearchIconClick} onFocus={toggleSearchIconClick}
onBlur={toggleSearchIconClick} onBlur={toggleSearchIconClick}
ref={searchBarRef} ref={searchBarRef}