From dc476d322de3a8d4d589c638076767e009dd59e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 7 Jul 2020 15:32:47 +0200
Subject: [PATCH] fix(docsearch): support initial query

---
 packages/docsearch-react/src/DocSearch.tsx       | 12 +++++++++---
 packages/docsearch-react/src/DocSearchModal.tsx  |  4 +++-
 .../src/useDocSearchKeyboardEvents.ts            |  2 +-
 packages/website/src/theme/SearchBar/index.js    | 16 +++++++++++-----
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx
index bce446bc6..9ff7e5443 100644
--- 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
index 85dfeae30..afd4ac9cb 100644
--- 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
index 79040e3eb..99f9417d3 100644
--- 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
index 5a4f7b69e..7e727a0d4 100644
--- 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={{