fix(docsearch): support initial query

francoischalifour · Jul 8, 2020 · dc476d3 · dc476d3
1 parent 34c3331
commit dc476d3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx
@@ -30,10 +30,15 @@ export interface DocSearchProps
 export function DocSearch(props: DocSearchProps) {
   const [isOpen, setIsOpen] = React.useState(false);
   const searchButtonRef = React.useRef<HTMLButtonElement>(null);
+  const [initialQuery, setInitialQuery] = React.useState('');
 
-  const onOpen = React.useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen]);
+  const onOpen = React.useCallback(
+    ({ query = '' } = {}) => {
+      setIsOpen(true);
+      setInitialQuery(query);
+    },
+    [setIsOpen]
+  );
 
   const onClose = React.useCallback(() => {
     setIsOpen(false);
@@ -49,6 +54,7 @@ export function DocSearch(props: DocSearchProps) {
         createPortal(
           <DocSearchModal
             {...props}
+            initialQuery={initialQuery}
             initialScrollY={window.scrollY}
             onClose={onClose}
           />,

diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -23,6 +23,7 @@ import { ScreenState } from './ScreenState';
 import { Footer } from './Footer';
 
 interface DocSearchModalProps extends DocSearchProps {
+  initialQuery?: string;
   initialScrollY: number;
   onClose?(): void;
 }
@@ -42,6 +43,7 @@ export function DocSearchModal({
   hitComponent = Hit,
   resultsFooterComponent = () => null,
   navigator,
+  initialQuery: queryFromProp = '',
   initialScrollY = 0,
 }: DocSearchModalProps) {
   const [state, setState] = React.useState<
@@ -57,7 +59,7 @@ export function DocSearchModal({
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const snipetLength = React.useRef<number>(10);
   const initialQuery = React.useRef(
-    typeof window !== 'undefined'
+    queryFromProp || typeof window !== 'undefined'
       ? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE)
       : ''
   ).current;

diff --git a/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts
@@ -30,7 +30,7 @@ export function useDocSearchKeyboardEvents({
         searchButtonRef.current === document.activeElement
       ) {
         if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
-          onOpen();
+          onOpen({ query: event.keyCode });
         }
       }
     }

diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js
@@ -41,6 +41,7 @@ function DocSearch({ indexName, appId, apiKey, searchParameters }) {
   const history = useHistory();
   const [isOpen, setIsOpen] = useState(false);
   const searchButtonRef = useRef(null);
+  const [initialQuery, setInitialQuery] = useState('');
 
   const importDocSearchModalIfNeeded = useCallback(() => {
     if (DocSearchModal) {
@@ -55,11 +56,15 @@ function DocSearch({ indexName, appId, apiKey, searchParameters }) {
     });
   }, []);
 
-  const onOpen = useCallback(() => {
-    importDocSearchModalIfNeeded().then(() => {
-      setIsOpen(true);
-    });
-  }, [importDocSearchModalIfNeeded, setIsOpen]);
+  const onOpen = useCallback(
+    ({ query = '' } = {}) => {
+      importDocSearchModalIfNeeded().then(() => {
+        setIsOpen(true);
+        setInitialQuery(query);
+      });
+    },
+    [importDocSearchModalIfNeeded, setIsOpen]
+  );
 
   const onClose = useCallback(() => {
     setIsOpen(false);
@@ -95,6 +100,7 @@ function DocSearch({ indexName, appId, apiKey, searchParameters }) {
             apiKey={apiKey}
             indexName={indexName}
             searchParameters={searchParameters}
+            initialQuery={initialQuery}
             initialScrollY={window.scrollY}
             onClose={onClose}
             navigator={{