diff --git a/packages/docusaurus-theme-search-algolia/package.json b/packages/docusaurus-theme-search-algolia/package.json index 8dd8fe8f8845..39c561497455 100644 --- a/packages/docusaurus-theme-search-algolia/package.json +++ b/packages/docusaurus-theme-search-algolia/package.json @@ -8,7 +8,7 @@ }, "license": "MIT", "dependencies": { - "@docsearch/react": "^1.0.0-alpha.24", + "@docsearch/react": "^1.0.0-alpha.25", "@hapi/joi": "^17.1.1", "algoliasearch": "^4.0.0", "algoliasearch-helper": "^3.1.1", diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js index 0b886618a0ee..035636697fb3 100644 --- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js +++ b/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, {useState, useCallback} from 'react'; +import React, {useState, useRef, useCallback} from 'react'; import {createPortal} from 'react-dom'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import {useHistory} from '@docusaurus/router'; @@ -35,7 +35,9 @@ function DocSearch(props) { const {siteMetadata} = useDocusaurusContext(); const {withBaseUrl} = useBaseUrlUtils(); const history = useHistory(); + const searchButtonRef = useRef(null); const [isOpen, setIsOpen] = useState(false); + const [initialQuery, setInitialQuery] = useState(null); const importDocSearchModalIfNeeded = useCallback(() => { if (DocSearchModal) { @@ -61,7 +63,23 @@ function DocSearch(props) { setIsOpen(false); }, [setIsOpen]); - useDocSearchKeyboardEvents({isOpen, onOpen, onClose}); + const onInput = useCallback( + (event) => { + importDocSearchModalIfNeeded().then(() => { + setIsOpen(true); + setInitialQuery(event.key); + }); + }, + [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery], + ); + + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }); return ( <> @@ -81,7 +99,7 @@ function DocSearch(props) { onFocus={importDocSearchModalIfNeeded} onMouseOver={importDocSearchModalIfNeeded} onClick={onOpen} - aria-label="Search" + ref={searchButtonRef} /> {isOpen && @@ -89,6 +107,7 @@ function DocSearch(props) {