From 6565c7ae050eb5744af317f22ac1cd080efef5d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Mon, 11 May 2020 10:28:41 +0200
Subject: [PATCH] Update SearchBox.js

Since we switched from React to Preact, the app lost the "autofocus" feature on the input when the modal opens.

This happens because [Preact follows the HTML spec](https://github.com/preactjs/preact/issues/1255#issuecomment-439714572) of triggering the autofocus on page load, and not when the component mounts. React is more "aggressive" on this behavior.

This therefore gets rid of the `autoFocus` prop which is ignored here, and focuses the input with an effect.

Closes #119.
---
 src/components/SearchBox/SearchBox.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchBox/SearchBox.js b/src/components/SearchBox/SearchBox.js
index 8f62bc64..dab414da 100644
--- a/src/components/SearchBox/SearchBox.js
+++ b/src/components/SearchBox/SearchBox.js
@@ -23,6 +23,12 @@ export const SearchBox = (props) => {
     props.onReset();
   }
 
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
   return (
     <div className="ais-SearchBox">
       <form
@@ -102,7 +108,6 @@ export const SearchBox = (props) => {
             autoCapitalize="off"
             spellCheck={false}
             maxLength={512}
-            autoFocus
             placeholder={props.translations.placeholder}
             value={props.currentRefinement}
             onChange={props.onChange}