From 17edfa94031fc8803cbe0db28905e52225e664a4 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:45:30 +0000
Subject: [PATCH] real forms across the plugin, so enter submits instead of
 doing nothing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

connection settings, add/move/rename/options dialogs and daemon settings all
put their fields in a div, so the button was the only way to submit and enter
silently did nothing — a keyboard trap wearing a layout. wrapped each in a
<form onSubmit>, made every non-submit button in those forms type="button"
(test port, update blocklist, discard, cancel, remove-file, known-dir
shortcuts), and dropped RenameDialog's manual onKeyDown enter check now that
the form handles it natively. the toolbar's filter box is left alone — it has
no submit action.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/ConnectionView.tsx               | 12 ++++++-----
 web/SettingsView.tsx                 | 22 +++++++++++++------
 web/dialogs/AddTorrentDialog.tsx     | 27 ++++++++++++-----------
 web/dialogs/MoveTorrentDialog.tsx    | 24 +++++++++++----------
 web/dialogs/RenameDialog.tsx         | 32 ++++++++++++----------------
 web/dialogs/TorrentOptionsDialog.tsx | 24 +++++++++++----------
 6 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/web/ConnectionView.tsx b/web/ConnectionView.tsx
index c7d2bcd..d40ea99 100644
--- a/web/ConnectionView.tsx
+++ b/web/ConnectionView.tsx
@@ -1,4 +1,5 @@
 import type { ServiceConnection } from 'officerdev';
+import type { FormEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { CheckCircle2, Loader2, Plug, Trash2, TriangleAlert } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -89,7 +90,8 @@ export const ConnectionView = () => {
     setShowAdvanced(!!connection?.username);
   }, [connection?.id]);
 
-  const submit = async () => {
+  const submit = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     setError('');
     try {
       await save.mutateAsync({ url: url.trim(), username: username.trim(), password, rpcPath: rpcPath.trim() });
@@ -135,7 +137,7 @@ export const ConnectionView = () => {
 
         {connection && <StatusRow connection={connection} health={health} />}
 
-        <div className="flex flex-col gap-4 rounded-xl border p-4">
+        <form onSubmit={submit} className="flex flex-col gap-4 rounded-xl border p-4">
           <Field
             label="Server URL"
             hint={URL_HINT}
@@ -181,18 +183,18 @@ export const ConnectionView = () => {
           )}
 
           <div className="flex items-center gap-2">
-            <Button size="sm" onClick={submit} disabled={!url.trim() || save.isPending}>
+            <Button type="submit" size="sm" disabled={!url.trim() || save.isPending}>
               {save.isPending && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
               {connection ? 'Save' : 'Connect'}
             </Button>
             {connection && (
-              <Button size="sm" variant="ghost" onClick={remove} disabled={forget.isPending}>
+              <Button type="button" size="sm" variant="ghost" onClick={remove} disabled={forget.isPending}>
                 <Trash2 className="mr-2 h-3.5 w-3.5" />
                 Disconnect
               </Button>
             )}
           </div>
-        </div>
+        </form>
       </div>
     </div>
   );
diff --git a/web/SettingsView.tsx b/web/SettingsView.tsx
index 927579a..39962bf 100644
--- a/web/SettingsView.tsx
+++ b/web/SettingsView.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { FormEvent, ReactNode } from 'react';
 import { useState } from 'react';
 import { Loader2, Plug, ShieldCheck } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -45,7 +45,8 @@ export const SettingsView = () => {
 
   const dirty = Object.keys(draft).length > 0;
 
-  const apply = async () => {
+  const apply = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     await save.mutateAsync(draft);
     setDraft({});
   };
@@ -80,7 +81,7 @@ export const SettingsView = () => {
   );
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <form onSubmit={apply} className="flex h-full min-h-0 flex-col">
       <Tabs defaultValue="download" className="flex min-h-0 flex-1 flex-col">
         <TabsList className="mx-4 mt-3 w-fit shrink-0">
           <TabsTrigger value="download">Downloads</TabsTrigger>
@@ -167,7 +168,13 @@ export const SettingsView = () => {
               {bool('peer-port-random-on-start', 'Pick a random port on each start')}
               {bool('port-forwarding-enabled', 'Ask the router to forward it (UPnP / NAT-PMP)')}
               <div>
-                <Button size="sm" variant="outline" onClick={() => portTest.mutate()} disabled={portTest.isPending}>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={() => portTest.mutate()}
+                  disabled={portTest.isPending}
+                >
                   {portTest.isPending ? (
                     <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                   ) : (
@@ -207,6 +214,7 @@ export const SettingsView = () => {
               {text('blocklist-url', 'Blocklist URL')}
               <div className="flex items-center gap-3">
                 <Button
+                  type="button"
                   size="sm"
                   variant="outline"
                   onClick={() => updateBlocklist.mutate()}
@@ -284,16 +292,16 @@ export const SettingsView = () => {
           <span className="flex-1 text-xs text-muted-foreground">
             {Object.keys(draft).length} unsaved change{Object.keys(draft).length === 1 ? '' : 's'}
           </span>
-          <Button size="sm" variant="ghost" onClick={() => setDraft({})}>
+          <Button type="button" size="sm" variant="ghost" onClick={() => setDraft({})}>
             Discard
           </Button>
-          <Button size="sm" onClick={apply} disabled={save.isPending}>
+          <Button type="submit" size="sm" disabled={save.isPending}>
             {save.isPending && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />}
             Save
           </Button>
         </div>
       )}
-    </div>
+    </form>
   );
 };
 
diff --git a/web/dialogs/AddTorrentDialog.tsx b/web/dialogs/AddTorrentDialog.tsx
index 1f5fe56..53a9e5f 100644
--- a/web/dialogs/AddTorrentDialog.tsx
+++ b/web/dialogs/AddTorrentDialog.tsx
@@ -1,4 +1,4 @@
-import type { ChangeEvent, DragEvent } from 'react';
+import type { ChangeEvent, DragEvent, FormEvent } from 'react';
 import { useState } from 'react';
 import { FileUp, Loader2, X } from 'lucide-react';
 import { toast } from 'sonner';
@@ -98,7 +98,8 @@ export const AddTorrentDialog = ({ open, onOpenChange }: AddTorrentDialogProps)
 
   const canSubmit = (files.length > 0 || urlList.length > 0) && !busy;
 
-  const submit = async () => {
+  const submit = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     const common = {
       downloadDir: downloadDir.trim() || undefined,
       labels: labels
@@ -148,7 +149,7 @@ export const AddTorrentDialog = ({ open, onOpenChange }: AddTorrentDialogProps)
           <DialogDescription>Paste magnet links or drop .torrent files.</DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <form onSubmit={submit} className="space-y-4">
           <div className="space-y-1.5">
             <Label htmlFor="tr-add-urls">Magnet links or URLs</Label>
             <Textarea
@@ -245,17 +246,17 @@ export const AddTorrentDialog = ({ open, onOpenChange }: AddTorrentDialogProps)
               Sequential download
             </label>
           </div>
-        </div>
 
-        <DialogFooter>
-          <Button variant="ghost" onClick={close} disabled={busy}>
-            Cancel
-          </Button>
-          <Button onClick={submit} disabled={!canSubmit}>
-            {busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            Add {files.length + urlList.length || ''}
-          </Button>
-        </DialogFooter>
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={close} disabled={busy}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Add {files.length + urlList.length || ''}
+            </Button>
+          </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );
diff --git a/web/dialogs/MoveTorrentDialog.tsx b/web/dialogs/MoveTorrentDialog.tsx
index 7c1c607..f75b153 100644
--- a/web/dialogs/MoveTorrentDialog.tsx
+++ b/web/dialogs/MoveTorrentDialog.tsx
@@ -1,4 +1,5 @@
 import type { Torrent } from '../shared';
+import type { FormEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
@@ -41,7 +42,8 @@ export const MoveTorrentDialog = ({ open, onOpenChange, targets, knownDirs }: Mo
     setMove(true);
   }, [open, targets]);
 
-  const submit = async () => {
+  const submit = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     await setLocation.mutateAsync({ ids: targets.map((t) => t.id), location: location.trim(), move });
     onOpenChange(false);
   };
@@ -56,7 +58,7 @@ export const MoveTorrentDialog = ({ open, onOpenChange, targets, knownDirs }: Mo
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <form onSubmit={submit} className="space-y-4">
           <div className="space-y-1.5">
             <Label htmlFor="tr-move-path">Destination</Label>
             <Input
@@ -111,16 +113,16 @@ export const MoveTorrentDialog = ({ open, onOpenChange, targets, knownDirs }: Mo
               </span>
             </label>
           </div>
-        </div>
 
-        <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={submit} disabled={!location.trim() || setLocation.isPending}>
-            Apply
-          </Button>
-        </DialogFooter>
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!location.trim() || setLocation.isPending}>
+              Apply
+            </Button>
+          </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );
diff --git a/web/dialogs/RenameDialog.tsx b/web/dialogs/RenameDialog.tsx
index f4dcdb7..7773c42 100644
--- a/web/dialogs/RenameDialog.tsx
+++ b/web/dialogs/RenameDialog.tsx
@@ -1,4 +1,5 @@
 import type { Torrent } from '../shared';
+import type { FormEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
@@ -38,7 +39,8 @@ export const RenameDialog = ({ open, onOpenChange, torrent, path }: RenameDialog
     if (open) setName(current);
   }, [open, current]);
 
-  const submit = async () => {
+  const submit = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     if (!torrent) return;
     await rename.mutateAsync({ id: torrent.id, path, name: name.trim() });
     onOpenChange(false);
@@ -52,28 +54,22 @@ export const RenameDialog = ({ open, onOpenChange, torrent, path }: RenameDialog
           <DialogDescription className="break-all">{parent ? `${parent}/` : path}</DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-1.5">
+        <form onSubmit={submit} className="space-y-1.5">
           <Label htmlFor="tr-rename">New name</Label>
-          <Input
-            id="tr-rename"
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => ev.key === 'Enter' && name.trim() && void submit()}
-            autoFocus
-          />
+          <Input id="tr-rename" value={name} onChange={(ev) => setName(ev.target.value)} autoFocus />
           <p className="text-xs text-muted-foreground">
             This renames the file or folder on disk, not just the display name.
           </p>
-        </div>
 
-        <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={submit} disabled={!name.trim() || name.trim() === current || rename.isPending}>
-            Rename
-          </Button>
-        </DialogFooter>
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!name.trim() || name.trim() === current || rename.isPending}>
+              Rename
+            </Button>
+          </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );
diff --git a/web/dialogs/TorrentOptionsDialog.tsx b/web/dialogs/TorrentOptionsDialog.tsx
index 910ce3e..c48e570 100644
--- a/web/dialogs/TorrentOptionsDialog.tsx
+++ b/web/dialogs/TorrentOptionsDialog.tsx
@@ -1,4 +1,5 @@
 import type { Torrent } from '../shared';
+import type { FormEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -67,7 +68,8 @@ export const TorrentOptionsDialog = ({ open, onOpenChange, targets }: TorrentOpt
 
   const patch = (next: Partial<FormState>) => setForm((prev) => (prev ? { ...prev, ...next } : prev));
 
-  const submit = async () => {
+  const submit = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     await set.mutateAsync({
       ids: targets.map((t) => t.id),
       bandwidthPriority: Number(form.bandwidthPriority),
@@ -98,7 +100,7 @@ export const TorrentOptionsDialog = ({ open, onOpenChange, targets }: TorrentOpt
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-5">
+        <form onSubmit={submit} className="space-y-5">
           <section className="space-y-3">
             <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Bandwidth</h3>
             <div className="grid grid-cols-2 gap-3">
@@ -206,16 +208,16 @@ export const TorrentOptionsDialog = ({ open, onOpenChange, targets }: TorrentOpt
               />
             </div>
           </section>
-        </div>
 
-        <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={submit} disabled={set.isPending}>
-            Save
-          </Button>
-        </DialogFooter>
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={set.isPending}>
+              Save
+            </Button>
+          </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );