real forms across the plugin, so enter submits instead of doing nothing
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>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user