feat(docsearch): support initialQuery

Closes #51
francoischalifour · Jul 20, 2020 · 11aa27b · 11aa27b
1 parent 89a9e24
commit 11aa27b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/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<HTMLButtonElement>(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) {
           <DocSearchModal
             {...props}
             initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
             onClose={onClose}
           />,
           document.body

diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/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<InternalDocSearchHit>
@@ -55,7 +56,7 @@ export function DocSearchModal({
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const snipetLength = React.useRef<number>(10);
   const initialQuery = React.useRef(
-    typeof window !== 'undefined'
+    initialQueryFromProp || 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
@@ -1,11 +1,20 @@
 import React from 'react';
 
+interface UseDocSearchKeyboardEventsProps {
+  isOpen: boolean;
+  onOpen(): void;
+  onClose(): void;
+  onInput?(event: KeyboardEvent): void;
+  searchButtonRef?: React.RefObject<HTMLButtonElement>;
+}
+
 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]);
 }
diff --git a/packages/website/docs/DocSearchModal.md b/packages/website/docs/DocSearchModal.md
@@ -66,6 +66,12 @@ The text that appears in the search box input when there is no query.
 
 [Search parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/) to forward to Algolia.
 
+### `initialQuery`
+
+> `string`
+
+The initial query when the modal opens.
+
 ### `onClose`
 
 > `() => void`

diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js
@@ -49,8 +49,9 @@ function transformSearchClient(searchClient) {
 
 function DocSearch(props) {
   const history = useHistory();
-  const [isOpen, setIsOpen] = useState(false);
   const searchButtonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState(null);
 
   const importDocSearchModalIfNeeded = useCallback(() => {
     if (DocSearchModal) {
@@ -75,7 +76,18 @@ function DocSearch(props) {
     setIsOpen(false);
   }, [setIsOpen]);
 
-  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose, searchButtonRef });
+  function onInput(event) {
+    setIsOpen(true);
+    setInitialQuery(event.key);
+  }
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  });
 
   return (
     <>
@@ -102,6 +114,7 @@ function DocSearch(props) {
         createPortal(
           <DocSearchModal
             initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
             onClose={onClose}
             navigator={{
               navigate({ suggestionUrl }) {