wrap the vaultwarden url field in a form so enter submits

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-19 10:41:43 +00:00
co-authored by Claude Opus 5
parent ff0a22e842
commit 38999ac666
+5 -8
View File
@@ -108,7 +108,8 @@ export const VaultPanel = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const save = async () => { const save = async (ev?: React.FormEvent) => {
ev?.preventDefault();
setSaving(true); setSaving(true);
setError(null); setError(null);
try { try {
@@ -182,14 +183,11 @@ export const VaultPanel = () => {
</div> </div>
</header> </header>
<section className="flex flex-col gap-4 rounded-xl border border-border p-4"> <form onSubmit={save} className="flex flex-col gap-4 rounded-xl border border-border p-4">
<Field label="Vaultwarden URL"> <Field label="Vaultwarden URL">
<input <input
value={url} value={url}
onChange={(ev) => setUrl(ev.target.value)} onChange={(ev) => setUrl(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter' && dirty && !saving) void save();
}}
placeholder="https://vault.example.com" placeholder="https://vault.example.com"
spellCheck={false} spellCheck={false}
autoCapitalize="none" autoCapitalize="none"
@@ -206,8 +204,7 @@ export const VaultPanel = () => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="button" type="submit"
onClick={() => void save()}
disabled={!dirty || saving} disabled={!dirty || saving}
className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40" className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
> >
@@ -233,7 +230,7 @@ export const VaultPanel = () => {
</button> </button>
)} )}
</div> </div>
</section> </form>
{config?.configured && ( {config?.configured && (
<section className="flex flex-col gap-3 rounded-xl border border-border p-4"> <section className="flex flex-col gap-3 rounded-xl border border-border p-4">