From 281fbc7b4c43f6e897751fb5281de921cf5be929 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Tue, 3 Jun 2025 14:56:01 +0100
Subject: [PATCH] fix: submit forms on enter key submission

---
 apps/web/src/components/FeedbackButton.tsx    | 10 +++++++---
 apps/web/src/components/Input.tsx             |  1 +
 apps/web/src/components/LabelForm.tsx         | 20 +++++++++++++++++--
 apps/web/src/components/NewWorkspaceForm.tsx  |  6 ++++++
 .../views/board/components/NewCardForm.tsx    | 18 ++++++++++++++++-
 .../views/board/components/NewListForm.tsx    | 12 ++++++++++-
 .../board/components/UpdateBoardSlugForm.tsx  |  6 ++++++
 .../views/boards/components/NewBoardForm.tsx  | 17 ++++++++++++++--
 .../views/card/components/NewCommentForm.tsx  |  6 ++++++
 .../members/components/InviteMemberForm.tsx   | 17 ++++++++++++++--
 10 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/FeedbackButton.tsx b/apps/web/src/components/FeedbackButton.tsx
index 4495cd57..887f7de1 100644
--- a/apps/web/src/components/FeedbackButton.tsx
+++ b/apps/web/src/components/FeedbackButton.tsx
@@ -98,12 +98,16 @@ const FeedbackButton: React.FC = () => {
                 onChange={(e) => {
                   setValue("feedback", e.target.value);
                 }}
-                onKeyDown={(e) => {
-                  e.stopPropagation();
-                }}
                 value={watch("feedback")}
                 contentEditable
                 className="max-h-[300px] min-h-[100px]"
+                onKeyDown={async (e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter" && e.shiftKey) {
+                    e.preventDefault();
+                    await handleSubmit(onSubmit)();
+                  }
+                }}
               />
               <div className="flex flex-row items-center justify-between pt-2">
                 <div>
diff --git a/apps/web/src/components/Input.tsx b/apps/web/src/components/Input.tsx
index d2712b2e..8a24d212 100644
--- a/apps/web/src/components/Input.tsx
+++ b/apps/web/src/components/Input.tsx
@@ -69,6 +69,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               prefix && "rounded-l-none",
               className && className,
             )}
+            onKeyDown={onKeyDown}
             {...props}
           />
           {type === "password" && (
diff --git a/apps/web/src/components/LabelForm.tsx b/apps/web/src/components/LabelForm.tsx
index c591c50e..5b2d8b41 100644
--- a/apps/web/src/components/LabelForm.tsx
+++ b/apps/web/src/components/LabelForm.tsx
@@ -1,5 +1,5 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
 
@@ -103,6 +103,12 @@ export function LabelForm({
     }
   };
 
+  useEffect(() => {
+    const nameElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#label-name");
+    if (nameElement) nameElement.focus();
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
@@ -122,7 +128,17 @@ export function LabelForm({
           </button>
         </div>
 
-        <Input id="label-name" placeholder="Name" {...register("name")} />
+        <Input
+          id="label-name"
+          placeholder="Name"
+          {...register("name")}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
+        />
         <Controller
           name="colour"
           control={control}
diff --git a/apps/web/src/components/NewWorkspaceForm.tsx b/apps/web/src/components/NewWorkspaceForm.tsx
index fab3fa15..e8d35565 100644
--- a/apps/web/src/components/NewWorkspaceForm.tsx
+++ b/apps/web/src/components/NewWorkspaceForm.tsx
@@ -76,6 +76,12 @@ export function NewWorkspaceForm() {
           id="workspace-name"
           placeholder="Workspace name"
           {...register("name")}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
diff --git a/apps/web/src/views/board/components/NewCardForm.tsx b/apps/web/src/views/board/components/NewCardForm.tsx
index cc891a86..6d028e3a 100644
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/apps/web/src/views/board/components/NewCardForm.tsx
@@ -238,7 +238,17 @@ export function NewCardForm({
         </div>
 
         <div>
-          <Input id="title" placeholder="Card title" {...register("title")} />
+          <Input
+            id="title"
+            placeholder="Card title"
+            {...register("title")}
+            onKeyDown={async (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                await handleSubmit(onSubmit)();
+              }
+            }}
+          />
         </div>
         <div className="mt-2">
           <Input
@@ -246,6 +256,12 @@ export function NewCardForm({
             onChange={(e) => setValue("description", e.target.value)}
             value={watch("description")}
             contentEditable
+            onKeyDown={async (e) => {
+              if (e.key === "Enter" && e.shiftKey) {
+                e.preventDefault();
+                await handleSubmit(onSubmit)();
+              }
+            }}
           />
         </div>
         <div className="mt-2 flex space-x-1">
diff --git a/apps/web/src/views/board/components/NewListForm.tsx b/apps/web/src/views/board/components/NewListForm.tsx
index 9cfa014a..b6c64693 100644
--- a/apps/web/src/views/board/components/NewListForm.tsx
+++ b/apps/web/src/views/board/components/NewListForm.tsx
@@ -122,7 +122,17 @@ export function NewListForm({
           </button>
         </div>
 
-        <Input id="list-name" placeholder="List name" {...register("name")} />
+        <Input
+          id="list-name"
+          placeholder="List name"
+          {...register("name")}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
+        />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
diff --git a/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx b/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
index b175385e..23337833 100644
--- a/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
+++ b/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
@@ -108,6 +108,12 @@ export function UpdateBoardSlugForm({
           {...register("slug")}
           errorMessage={errors.slug?.message}
           prefix={`kan.bn/${workspaceSlug}/`}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
diff --git a/apps/web/src/views/boards/components/NewBoardForm.tsx b/apps/web/src/views/boards/components/NewBoardForm.tsx
index 7ff2e28d..0303f890 100644
--- a/apps/web/src/views/boards/components/NewBoardForm.tsx
+++ b/apps/web/src/views/boards/components/NewBoardForm.tsx
@@ -1,9 +1,11 @@
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
 
 import type { NewBoardInput } from "@kan/api/types";
 
 import Button from "~/components/Button";
+import Input from "~/components/Input";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
@@ -33,6 +35,12 @@ export function NewBoardForm() {
     createBoard.mutate(data);
   };
 
+  useEffect(() => {
+    const titleElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#name");
+    if (titleElement) titleElement.focus();
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
@@ -49,11 +57,16 @@ export function NewBoardForm() {
             <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
           </button>
         </div>
-        <input
+        <Input
           id="name"
           placeholder="Name"
           {...register("name", { required: true })}
-          className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>
 
diff --git a/apps/web/src/views/card/components/NewCommentForm.tsx b/apps/web/src/views/card/components/NewCommentForm.tsx
index b105a11b..128a1ae8 100644
--- a/apps/web/src/views/card/components/NewCommentForm.tsx
+++ b/apps/web/src/views/card/components/NewCommentForm.tsx
@@ -58,6 +58,12 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
         disabled={false}
         onChange={(e) => setValue("comment", e.target.value)}
         className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+        onKeyDown={async (e) => {
+          if (e.key === "Enter" && e.shiftKey) {
+            e.preventDefault();
+            await handleSubmit(onSubmit)();
+          }
+        }}
       />
       <div className="flex justify-end">
         <button
diff --git a/apps/web/src/views/members/components/InviteMemberForm.tsx b/apps/web/src/views/members/components/InviteMemberForm.tsx
index 6268528f..a0506567 100644
--- a/apps/web/src/views/members/components/InviteMemberForm.tsx
+++ b/apps/web/src/views/members/components/InviteMemberForm.tsx
@@ -1,9 +1,11 @@
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
 
 import type { InviteMemberInput } from "@kan/api/types";
 
 import Button from "~/components/Button";
+import Input from "~/components/Input";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
@@ -34,6 +36,12 @@ export function InviteMemberForm() {
     createBoard.mutate(data);
   };
 
+  useEffect(() => {
+    const emailElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#email");
+    if (emailElement) emailElement.focus();
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
@@ -50,11 +58,16 @@ export function InviteMemberForm() {
             <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
           </button>
         </div>
-        <input
+        <Input
           id="email"
           placeholder="Email"
           {...register("email", { required: true })}
-          className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
         />
       </div>