feat: select query when coming from a selection search

Author: francoischalifour

packages/docsearch-react/src/DocSearchModal.tsx

@@ -56,11 +56,14 @@ export function DocSearchModal({
   const dropdownRef = React.useRef<HTMLDivElement | null>(null);
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const snippetLength = React.useRef<number>(10);
-  const initialQuery = React.useRef(
-    initialQueryFromProp || typeof window !== 'undefined'
+  const initialQueryFromSelection = React.useRef(
+    typeof window !== 'undefined'
       ? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE)
       : ''
   ).current;
+  const initialQuery = React.useRef(
+    initialQueryFromProp || initialQueryFromSelection
+  ).current;
 
   const searchClient = useSearchClient(appId, apiKey, transformSearchClient);
   const favoriteSearches = React.useRef(
@@ -373,6 +376,10 @@ export function DocSearchModal({
             autoFocus={initialQuery.length === 0}
             onClose={onClose}
             inputRef={inputRef}
+            isFromSelection={
+              Boolean(initialQuery) &&
+              initialQuery === initialQueryFromSelection
+            }
           />
         </header>
 

packages/docsearch-react/src/SearchBox.tsx

@@ -21,6 +21,7 @@ interface SearchBoxProps
   autoFocus: boolean;
   inputRef: MutableRefObject<HTMLInputElement | null>;
   onClose(): void;
+  isFromSelection: boolean;
 }
 
 export function SearchBox(props: SearchBoxProps) {
@@ -34,6 +35,12 @@ export function SearchBox(props: SearchBoxProps) {
     }
   }, [props.autoFocus, props.inputRef]);
 
+  React.useEffect(() => {
+    if (props.isFromSelection && props.inputRef.current) {
+      props.inputRef.current.select();
+    }
+  }, [props.isFromSelection, props.inputRef]);
+
   return (
     <>
       <form