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:
2026-08-19 10:52:36 +00:00
co-authored by Claude Opus 5
parent b26aefd085
commit 17edfa9403
6 changed files with 76 additions and 65 deletions
+7 -5
View File
@@ -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>
);