From 06203f97b39325646093a96da24b26e225735aa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Wed, 19 Aug 2026 10:43:59 +0000
Subject: [PATCH] wrap the document, record and send-mail editors in real forms
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

typing into a field and pressing enter did nothing in the document editor, the
customer/item/payment/expense dialogs and the send-document dialog — inputs sat
in a div, so the button was the only way to submit. now each wraps in a
<form onSubmit>, with every non-submit button (cancel, close, add/remove line,
"same as billing") marked type="button" so it doesn't submit instead of doing
its own thing.

the record editors share one dialog shell (EditorShell), so a single form
there covers customer, item, payment and expense at once — kept the dialog's
grid gap intact with display:contents rather than nesting a box.

left the list-view filter boxes and the reports date-range picker alone: none
of them has a submit action, so there's nothing for enter to do.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/DocumentEditor.tsx     | 15 +++---
 web/RecordEditors.tsx      | 38 +++++++++------
 web/SendDocumentDialog.tsx | 97 ++++++++++++++++++++------------------
 3 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/web/DocumentEditor.tsx b/web/DocumentEditor.tsx
index a417728..a86ff6c 100644
--- a/web/DocumentEditor.tsx
+++ b/web/DocumentEditor.tsx
@@ -197,7 +197,8 @@ export const DocumentEditor = ({ resource, id, onClose }: Props) => {
     template !== '' &&
     lines.some((l) => l.name.trim());
 
-  const save = () => {
+  const save = (ev?: React.FormEvent) => {
+    ev?.preventDefault();
     // The three resources agree on everything below the header, and disagree on nothing but it.
     const header = isRecurring
       ? {
@@ -260,18 +261,18 @@ export const DocumentEditor = ({ resource, id, onClose }: Props) => {
   const busy = create.isPending || update.isPending;
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-background">
+    <form onSubmit={save} className="flex h-full min-h-0 flex-col bg-background">
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2">
         <div className="min-w-0 flex-1 text-xs font-semibold">
           {isNew ? `New ${KIND_NOUN[resource]}` : `Edit ${number || KIND_NOUN[resource]}`}
         </div>
-        <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={onClose} disabled={busy}>
+        <Button variant="ghost" size="sm" type="button" className="h-7 text-xs" onClick={onClose} disabled={busy}>
           Cancel
         </Button>
-        <Button size="sm" className="h-7 text-xs" onClick={save} disabled={!canSave || busy}>
+        <Button type="submit" size="sm" className="h-7 text-xs" disabled={!canSave || busy}>
           {busy ? 'Saving…' : 'Save'}
         </Button>
-        <Button variant="ghost" size="sm" className="h-7 px-2" onClick={onClose} title="Close">
+        <Button variant="ghost" size="sm" type="button" className="h-7 px-2" onClick={onClose} title="Close">
           <X className="h-3.5 w-3.5" />
         </Button>
       </div>
@@ -517,6 +518,7 @@ export const DocumentEditor = ({ resource, id, onClose }: Props) => {
                   <Button
                     variant="ghost"
                     size="sm"
+                    type="button"
                     className="h-8 w-8 p-0 text-muted-foreground"
                     disabled={lines.length === 1}
                     onClick={() => setLines((prev) => prev.filter((l) => l.key !== line.key))}
@@ -532,6 +534,7 @@ export const DocumentEditor = ({ resource, id, onClose }: Props) => {
             <Button
               variant="ghost"
               size="sm"
+              type="button"
               className="h-7 text-xs"
               onClick={() => setLines((prev) => [...prev, newLine(prev.length)])}
             >
@@ -592,7 +595,7 @@ export const DocumentEditor = ({ resource, id, onClose }: Props) => {
           </div>
         </div>
       </div>
-    </div>
+    </form>
   );
 };
 
diff --git a/web/RecordEditors.tsx b/web/RecordEditors.tsx
index 792eb1e..1d48e10 100644
--- a/web/RecordEditors.tsx
+++ b/web/RecordEditors.tsx
@@ -87,21 +87,31 @@ const EditorShell = ({
 }) => (
   <Dialog open onOpenChange={(open) => !open && onClose()}>
     <DialogContent className={wide ? 'sm:max-w-2xl' : 'sm:max-w-lg'}>
-      <DialogHeader>
-        <DialogTitle>{title}</DialogTitle>
-        {description && <DialogDescription>{description}</DialogDescription>}
-      </DialogHeader>
+      {/* `contents` keeps the form invisible to DialogContent's grid layout — it still owns the gap between
+          header, body and footer, the form just carries Enter-to-submit across all three. */}
+      <form
+        onSubmit={(ev) => {
+          ev.preventDefault();
+          onSave();
+        }}
+        className="contents"
+      >
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
 
-      <div className="max-h-[65vh] space-y-3 overflow-y-auto pr-1">{children}</div>
+        <div className="max-h-[65vh] space-y-3 overflow-y-auto pr-1">{children}</div>
 
-      <DialogFooter>
-        <Button variant="ghost" size="sm" onClick={onClose} disabled={busy}>
-          Cancel
-        </Button>
-        <Button size="sm" onClick={onSave} disabled={!canSave || busy}>
-          {busy ? 'Saving…' : 'Save'}
-        </Button>
-      </DialogFooter>
+        <DialogFooter>
+          <Button variant="ghost" size="sm" type="button" onClick={onClose} disabled={busy}>
+            Cancel
+          </Button>
+          <Button type="submit" size="sm" disabled={!canSave || busy}>
+            {busy ? 'Saving…' : 'Save'}
+          </Button>
+        </DialogFooter>
+      </form>
     </DialogContent>
   </Dialog>
 );
@@ -289,7 +299,7 @@ const AddressFields = ({
       <div className="mb-2 flex items-center justify-between">
         <div className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{label}</div>
         {onCopy && (
-          <Button variant="ghost" size="sm" className="h-6 text-[10px]" onClick={onCopy}>
+          <Button variant="ghost" size="sm" type="button" className="h-6 text-[10px]" onClick={onCopy}>
             Same as billing
           </Button>
         )}
diff --git a/web/SendDocumentDialog.tsx b/web/SendDocumentDialog.tsx
index 15d2be6..546135d 100644
--- a/web/SendDocumentDialog.tsx
+++ b/web/SendDocumentDialog.tsx
@@ -85,62 +85,69 @@ export const SendDocumentDialog = ({
 
   const missingRecipient = !to.trim();
 
-  const submit = () => {
+  const submit = (ev?: React.FormEvent) => {
+    ev?.preventDefault();
     action.mutate({ id: target.id, action: 'send', payload: { subject, body, from, to } }, { onSuccess: onClose });
   };
 
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
       <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>
-            {target.resend ? 'Resend' : 'Send'} {kind} {target.number}
-          </DialogTitle>
-          <DialogDescription>
-            This emails {target.customerName} through InvoiceShelf. It cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
+        {/* `contents` keeps the form invisible to DialogContent's grid layout — it still owns the gap between
+            header, body and footer, the form just carries Enter-to-submit across all three. */}
+        <form onSubmit={submit} className="contents">
+          <DialogHeader>
+            <DialogTitle>
+              {target.resend ? 'Resend' : 'Send'} {kind} {target.number}
+            </DialogTitle>
+            <DialogDescription>
+              This emails {target.customerName} through InvoiceShelf. It cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
 
-        <div className="space-y-3">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1">
-              <Label className="text-xs">To</Label>
-              <Input value={to} onChange={(e) => setTo(e.target.value)} className="h-8 text-xs" type="email" />
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs">To</Label>
+                <Input value={to} onChange={(e) => setTo(e.target.value)} className="h-8 text-xs" type="email" />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">From</Label>
+                <Input value={from} onChange={(e) => setFrom(e.target.value)} className="h-8 text-xs" type="email" />
+              </div>
             </div>
             <div className="space-y-1">
-              <Label className="text-xs">From</Label>
-              <Input value={from} onChange={(e) => setFrom(e.target.value)} className="h-8 text-xs" type="email" />
+              <Label className="text-xs">Subject</Label>
+              <Input value={subject} onChange={(e) => setSubject(e.target.value)} className="h-8 text-xs" />
             </div>
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs">Subject</Label>
-            <Input value={subject} onChange={(e) => setSubject(e.target.value)} className="h-8 text-xs" />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs">Message</Label>
-            <Textarea value={body} onChange={(e) => setBody(e.target.value)} rows={7} className="text-xs" />
-            <p className="text-[10px] text-muted-foreground">
-              HTML. InvoiceShelf attaches the PDF itself — do not link it here.
-            </p>
-          </div>
-          {missingRecipient && (
-            <p className="text-[10px] text-warning">This customer has no email address on file. Enter one to send.</p>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="ghost" size="sm" onClick={onClose} disabled={action.isPending}>
-            Cancel
-          </Button>
-          <Button size="sm" onClick={submit} disabled={action.isPending || missingRecipient}>
-            {action.isPending ? (
-              <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <Send className="mr-1.5 h-3.5 w-3.5" />
+            <div className="space-y-1">
+              <Label className="text-xs">Message</Label>
+              <Textarea value={body} onChange={(e) => setBody(e.target.value)} rows={7} className="text-xs" />
+              <p className="text-[10px] text-muted-foreground">
+                HTML. InvoiceShelf attaches the PDF itself — do not link it here.
+              </p>
+            </div>
+            {missingRecipient && (
+              <p className="text-[10px] text-warning">
+                This customer has no email address on file. Enter one to send.
+              </p>
             )}
-            Send to {to || '—'}
-          </Button>
-        </DialogFooter>
+          </div>
+
+          <DialogFooter>
+            <Button variant="ghost" size="sm" type="button" onClick={onClose} disabled={action.isPending}>
+              Cancel
+            </Button>
+            <Button type="submit" size="sm" disabled={action.isPending || missingRecipient}>
+              {action.isPending ? (
+                <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Send className="mr-1.5 h-3.5 w-3.5" />
+              )}
+              Send to {to || '—'}
+            </Button>
+          </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );