diff --git a/src/DocSearch.tsx b/src/DocSearch.tsx index 008f5e1b1..8398b43e8 100644 --- a/src/DocSearch.tsx +++ b/src/DocSearch.tsx @@ -27,11 +27,13 @@ export interface DocSearchProps }): JSX.Element | null; transformSearchClient?(searchClient: SearchClient): SearchClient; disableUserPersonalization?: boolean; + initialQuery?: string; } export function DocSearch(props: DocSearchProps) { - const [isOpen, setIsOpen] = React.useState(false); const searchButtonRef = React.useRef(null); + const [isOpen, setIsOpen] = React.useState(false); + const [initialQuery, setInitialQuery] = React.useState(undefined); const onOpen = React.useCallback(() => { setIsOpen(true); @@ -41,7 +43,18 @@ export function DocSearch(props: DocSearchProps) { setIsOpen(false); }, [setIsOpen]); - useDocSearchKeyboardEvents({ isOpen, onOpen, onClose, searchButtonRef }); + function onInput(event) { + setIsOpen(true); + setInitialQuery(event.key); + } + + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }); return ( <> @@ -52,6 +65,7 @@ export function DocSearch(props: DocSearchProps) { , document.body diff --git a/src/DocSearchModal.tsx b/src/DocSearchModal.tsx index 0007a3f55..9fa566ffe 100644 --- a/src/DocSearchModal.tsx +++ b/src/DocSearchModal.tsx @@ -41,6 +41,7 @@ export function DocSearchModal({ initialScrollY = 0, transformSearchClient = identity, disableUserPersonalization = false, + initialQuery: initialQueryFromProp = '', }: DocSearchModalProps) { const [state, setState] = React.useState< AutocompleteState @@ -55,7 +56,7 @@ export function DocSearchModal({ const inputRef = React.useRef(null); const snipetLength = React.useRef(10); const initialQuery = React.useRef( - typeof window !== 'undefined' + initialQueryFromProp || typeof window !== 'undefined' ? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE) : '' ).current; diff --git a/src/useDocSearchKeyboardEvents.ts b/src/useDocSearchKeyboardEvents.ts index 79040e3eb..1bc286b25 100644 --- a/src/useDocSearchKeyboardEvents.ts +++ b/src/useDocSearchKeyboardEvents.ts @@ -1,11 +1,20 @@ import React from 'react'; +interface UseDocSearchKeyboardEventsProps { + isOpen: boolean; + onOpen(): void; + onClose(): void; + onInput?(event: KeyboardEvent): void; + searchButtonRef?: React.RefObject; +} + export function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose, + onInput, searchButtonRef, -}) { +}: UseDocSearchKeyboardEventsProps) { React.useEffect(() => { function onKeyDown(event: KeyboardEvent) { if ( @@ -27,10 +36,11 @@ export function useDocSearchKeyboardEvents({ if ( searchButtonRef && - searchButtonRef.current === document.activeElement + searchButtonRef.current === document.activeElement && + onInput ) { if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) { - onOpen(); + onInput(event); } } } @@ -40,5 +50,5 @@ export function useDocSearchKeyboardEvents({ return () => { window.removeEventListener('keydown', onKeyDown); }; - }, [isOpen, onOpen, onClose, searchButtonRef]); + }, [isOpen, onOpen, onClose, onInput, searchButtonRef]); }