refactor(docsearch): manage input focus with effects

The `autoFocus` prop is not standardize when coming from a component that gets mounted after the first page load. Although this works with React, it does with Preact. This makes it work with both libraries.
algolia · Jul 7, 2020 · 2a00d3f · 2a00d3f
1 parent 929b1c6
commit 2a00d3f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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,