From 86a11e6cb5c6a21685ba7455242f562ac74d0c74 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Tue, 30 Dec 2025 05:13:50 +0000
Subject: [PATCH] automatically focus first input

---
 packages/frontend/src/components/login-form.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/login-form.tsx b/packages/frontend/src/components/login-form.tsx
index 67c3ca2..4c286f0 100644
--- a/packages/frontend/src/components/login-form.tsx
+++ b/packages/frontend/src/components/login-form.tsx
@@ -1,4 +1,5 @@
-import { type ChangeEvent, useMemo, useState } from "react";
+/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <> */
+import { type ChangeEvent, useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -140,6 +141,17 @@ export default function LogInForm() {
             });
     };
 
+    const focusFirstInput = () => {
+        const firstInput = document.querySelector("input");
+        if (firstInput) {
+            (firstInput as HTMLInputElement).focus();
+        }
+    };
+
+    useEffect(() => {
+        focusFirstInput();
+    }, []);
+
     const resetForm = () => {
         setError("");
         setSubmitAttempted(false);
@@ -147,6 +159,8 @@ export default function LogInForm() {
         setNameTouched(false);
         setUsernameTouched(false);
         setPasswordTouched(false);
+
+        requestAnimationFrame(() => focusFirstInput());
     };
 
     const handleSubmit = (e: React.FormEvent) => {