fix(docsearch): don't focus input if initial query

Author: francoischalifour

src/DocSearch.tsx

@@ -43,6 +43,9 @@ export function DocSearch({
   const dropdownRef = React.useRef<HTMLDivElement | null>(null);
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const snipetLength = React.useRef<number>(10);
+  const initialQuery = React.useRef(
+    typeof window !== 'undefined' ? window.getSelection()!.toString() : ''
+  ).current;
 
   const searchClient = React.useMemo(() => createSearchClient(appId, apiKey), [
     appId,
@@ -90,10 +93,7 @@ export function DocSearch({
         placeholder: 'Search docs...',
         openOnFocus: true,
         initialState: {
-          query:
-            typeof window !== 'undefined'
-              ? window.getSelection()!.toString()
-              : '',
+          query: initialQuery,
         },
         onStateChange({ state }) {
           setState(state as any);
@@ -230,6 +230,7 @@ export function DocSearch({
       recentSearches,
       favoriteSearches,
       saveRecentSearch,
+      initialQuery,
     ]
   );
 
@@ -291,6 +292,7 @@ export function DocSearch({
           <SearchBox
             {...autocomplete}
             state={state}
+            initialQuery={initialQuery}
             onClose={onClose}
             inputRef={inputRef}
           />

src/SearchBox.tsx

@@ -17,6 +17,7 @@ interface SearchBoxProps
     React.KeyboardEvent
   > {
   state: AutocompleteState<InternalDocSearchHit>;
+  initialQuery: string;
   inputRef: MutableRefObject<HTMLInputElement | null>;
   onClose(): void;
 }
@@ -25,6 +26,17 @@ export function SearchBox(props: SearchBoxProps) {
   const { onSubmit, onReset } = props.getFormProps({
     inputElement: props.inputRef.current,
   });
+  const { initialQuery, refresh } = props;
+
+  // We don't focus the input when there's an initial query because users
+  // rather want to see the results directly. We therefore need to refresh
+  // the autocomplete instance to load all the results, which is usually
+  // triggered on focus.
+  React.useEffect(() => {
+    if (initialQuery.length > 0) {
+      refresh();
+    }
+  }, [initialQuery, refresh]);
 
   return (
     <>
@@ -48,6 +60,7 @@ export function SearchBox(props: SearchBoxProps) {
           className="DocSearch-Input"
           ref={props.inputRef}
           {...props.getInputProps({
+            autoFocus: props.initialQuery.length === 0,
             inputElement: props.inputRef.current!,
             type: 'search',
             maxLength: '512',