From cab9fddecc336210b81faf3908ba5f024a5688d5 Mon Sep 17 00:00:00 2001
From: Jeremy <git@jrmyphlmn.com>
Date: Tue, 5 Nov 2024 11:54:57 +0300
Subject: [PATCH] Autofocus inputs (#486)

---
 components/custom/auth-form.tsx        |  1 +
 components/custom/multimodal-input.tsx |  1 +
 components/custom/submit-button.tsx    | 13 +++++++------
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/custom/auth-form.tsx b/components/custom/auth-form.tsx
index 2bbd08d..0b9a2f5 100644
--- a/components/custom/auth-form.tsx
+++ b/components/custom/auth-form.tsx
@@ -30,6 +30,7 @@ export function AuthForm({
           placeholder="user@acme.com"
           autoComplete="email"
           required
+          autoFocus
           defaultValue={defaultEmail}
         />
 
diff --git a/components/custom/multimodal-input.tsx b/components/custom/multimodal-input.tsx
index c481041..7198f41 100644
--- a/components/custom/multimodal-input.tsx
+++ b/components/custom/multimodal-input.tsx
@@ -254,6 +254,7 @@ export function MultimodalInput({
           className
         )}
         rows={3}
+        autoFocus
         onKeyDown={(event) => {
           if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
diff --git a/components/custom/submit-button.tsx b/components/custom/submit-button.tsx
index 3ef300b..903330d 100644
--- a/components/custom/submit-button.tsx
+++ b/components/custom/submit-button.tsx
@@ -1,18 +1,19 @@
-"use client";
+'use client';
 
-import { useFormStatus } from "react-dom";
+import { useFormStatus } from 'react-dom';
 
-import { LoaderIcon } from "@/components/custom/icons";
+import { LoaderIcon } from '@/components/custom/icons';
 
-import { Button } from "../ui/button";
+import { Button } from '../ui/button';
 
 export function SubmitButton({ children }: { children: React.ReactNode }) {
   const { pending } = useFormStatus();
 
   return (
     <Button
-      type={pending ? "button" : "submit"}
+      type={pending ? 'button' : 'submit'}
       aria-disabled={pending}
+      disabled={pending}
       className="relative"
     >
       {children}
@@ -22,7 +23,7 @@ export function SubmitButton({ children }: { children: React.ReactNode }) {
         </span>
       )}
       <span aria-live="polite" className="sr-only" role="status">
-        {pending ? "Loading" : "Submit form"}
+        {pending ? 'Loading' : 'Submit form'}
       </span>
     </Button>
   );