fix: modal forms not submitting on Enter key (#9)

* fix: add type="button" to modal close buttons to fix Enter key form submission

Previously, pressing Enter in modal form inputs would dismiss the modal instead
of submitting the form because close buttons defaulted to type="submit". This
adds explicit type="button" to all modal close buttons to ensure Enter key
properly submits forms.

Fixes:
- New board creation via Enter key
- New workspace creation via Enter key
- New card creation via Enter key
- New list creation via Enter key
- Member invitation via Enter key
- Label creation/editing via Enter key
- Board URL updates via Enter key
- Import boards forms via Enter key

* fix: submit forms on enter key submission

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

apps/web/src/views/boards/components/ImportBoardsForm.tsx

@@ -251,6 +251,7 @@ export function ImportBoardsForm() {
         </div>
 
         <button
+          type="button"
           className="rounded p-1 hover:bg-light-200 dark:hover:bg-dark-300"
           onClick={() => closeModal()}
         >

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,12 +35,19 @@ 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">
         <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
           <h2 className="text-sm font-bold">New board</h2>
           <button
+            type="button"
             className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
             onClick={(e) => {
               e.preventDefault();
@@ -48,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>