From 9a09c40f225aeb4b020f6e6f1b1afce8d7685c2d Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Sun, 22 Jun 2025 02:40:03 +0200
Subject: [PATCH] automatically refocus text input field after submission

---
 src/app/components/GuessForm.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/components/GuessForm.tsx b/src/app/components/GuessForm.tsx
index 4b65f00..ac8430b 100644
--- a/src/app/components/GuessForm.tsx
+++ b/src/app/components/GuessForm.tsx
@@ -1,6 +1,6 @@
 import { useLanguage } from "@/LanguageContext";
 import { translations } from "@/translations";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 interface GuessFormProps {
   input: string;
@@ -13,9 +13,25 @@ interface GuessFormProps {
 const GuessForm: React.FC<GuessFormProps> = ({ input, onInputChange, onSubmit, disabled, loading }) => {
   const { language } = useLanguage();
   const t = translations[language];
+  const inputRef = useRef<HTMLInputElement>(null);
+  const prevInputRef = useRef(input);
+
+  // Focus input when it gets cleared after submission
+  useEffect(() => {
+    if (prevInputRef.current && !input && !loading) {
+      inputRef.current?.focus();
+    }
+    prevInputRef.current = input;
+  }, [input, loading]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    onSubmit(e);
+  };
+
   return (
-    <form onSubmit={onSubmit} className="flex gap-2">
+    <form onSubmit={handleSubmit} className="flex gap-2">
       <input
+        ref={inputRef}
         type="text"
         value={input}
         onChange={onInputChange}