diff --git a/src/DocSearchModal.tsx b/src/DocSearchModal.tsx
index 300f7569c..85dfeae30 100644
--- a/src/DocSearchModal.tsx
+++ b/src/DocSearchModal.tsx
@@ -106,7 +106,6 @@ export function DocSearchModal({
       >({
         id: 'docsearch',
         defaultHighlightedIndex: 0,
-        autoFocus: true,
         placeholder,
         openOnFocus: true,
         initialState: {
diff --git a/src/SearchBox.tsx b/src/SearchBox.tsx
index acf53f343..948266d6b 100644
--- a/src/SearchBox.tsx
+++ b/src/SearchBox.tsx
@@ -28,6 +28,12 @@ export function SearchBox(props: SearchBoxProps) {
     inputElement: props.inputRef.current,
   });
 
+  React.useEffect(() => {
+    if (props.autoFocus && props.inputRef.current) {
+      props.inputRef.current.focus();
+    }
+  }, [props.autoFocus, props.inputRef]);
+
   return (
     <>
       <form
@@ -50,7 +56,6 @@ export function SearchBox(props: SearchBoxProps) {
           className="DocSearch-Input"
           ref={props.inputRef}
           {...props.getInputProps({
-            autoFocus: props.autoFocus,
             inputElement: props.inputRef.current!,
             type: 'search',
             maxLength: MAX_QUERY_SIZE,