refactor a bit more

src/Input.tsx

@@ -5,8 +5,6 @@ interface InputProps {
   text: string;
   suggestion: string;
   onTextChange: (text: string) => void;
-  focus: boolean;
-  setFocus: (focus: boolean) => void;
 
   onEnter: () => void;
   onCancel: () => void;
@@ -57,22 +55,14 @@ function focusPrevElement() {
   }
 }
 
-export function Input({placeholder, text, suggestion, onTextChange, focus, setFocus, onEnter, onCancel, extraHandlers, children}: InputProps) {
+export function Input({placeholder, text, suggestion, onTextChange, onEnter, onCancel, extraHandlers, children}: InputProps) {
   const ref = useRef<HTMLInputElement>(null);
-  const [hideChildren, setHideChildren] = useState(false);
-
-  useEffect(() => {
-    if (focus) {
-      ref.current?.focus();
-      setHideChildren(false);
-    }
-  }, [focus]);
+  const [focus, setFocus] = useState<"yes"|"hide"|"no">("no");
 
   useEffect(() => autoInputWidth(ref, (text+(focus?suggestion:'')) || placeholder), [ref, text, suggestion, focus]);
 
   const onKeyDown = (e: KeyboardEvent) => {
-    setHideChildren(false);
-
+    setFocus("yes");
     const keys = {
       // auto-complete
       Tab: () => {
@@ -123,8 +113,8 @@ export function Input({placeholder, text, suggestion, onTextChange, focus, setFo
       },
 
       Escape: () => {
-        if (!hideChildren) {
-          setHideChildren(true);
+        if (focus === "yes") {
+          setFocus("hide");
           e.preventDefault();
         }
       },
@@ -138,7 +128,7 @@ export function Input({placeholder, text, suggestion, onTextChange, focus, setFo
   };
 
   return <span className="inputBlock">
-    {focus && !hideChildren && children}
+    {(focus === "yes") && children}
     <span className="editable suggest">{text}{focus && suggestion}</span>
     <input ref={ref}
       placeholder={placeholder}
@@ -148,8 +138,8 @@ export function Input({placeholder, text, suggestion, onTextChange, focus, setFo
         // @ts-ignore
         onTextChange(e.target.value)}
       onKeyDown={onKeyDown}
-      onFocus={() => setFocus(true)}
-      onBlur={() => setFocus(false)}
+      onFocus={() => setFocus("yes")}
+      onBlur={() => setFocus("no")}
       spellCheck={false}
       />
   </span>;