Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Feb 1, 2020
Merged

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36a4f9c
fix(v2): remove focus on search input when hovering over it
lex111 Feb 1, 2020
6b3473d
Fix deps
lex111 Feb 1, 2020
4b8ca8e
Improve naming
lex111 Feb 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const Search = props => {
} = siteConfig;
const history = useHistory();

function initAlgolia() {
function initAlgolia(focus) {
window.docsearch({
appId: algolia.appId,
apiKey: algolia.apiKey,
Expand All @@ -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;
}
Expand All @@ -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) {
Expand All @@ -77,7 +78,13 @@ const Search = props => {

const handleSearchInputBlur = useCallback(() => {
props.handleSearchBarToggle(!props.isSearchBarExpanded);
}, [algoliaLoaded]);
}, [props.isSearchBarExpanded]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix also proper deps.


const handleSearchInput = useCallback(e => {
const needFocus = e.type !== 'mouseover';

loadAlgolia(needFocus);
});

return (
<div className="navbar__search" key="search-box">
Expand All @@ -87,8 +94,8 @@ const Search = props => {
className={classnames('search-icon', {
'search-icon-hidden': props.isSearchBarExpanded,
})}
onClick={toggleSearchIconClick}
onKeyDown={toggleSearchIconClick}
onClick={handleSearchIcon}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rename handler for consistency.

onKeyDown={handleSearchIcon}
tabIndex={0}
/>
<input
Expand All @@ -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}
/>
Expand Down