fix(forms): submit modal actions with enter

This commit is contained in:
2026-06-07 15:37:02 +03:30
parent 132c8c44ef
commit 666d04ff26
8 changed files with 87 additions and 69 deletions

View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useEffect, useState, type FormEvent } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Plus, Trash2, Pencil, Eye, LayoutDashboard } from 'lucide-react';
import { toast } from 'sonner';
@@ -94,8 +94,9 @@ export default function Workspaces() {
}
};
const confirmDelete = async () => {
if (!deleteModal.workspace) return;
const confirmDelete = async (event?: FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!deleteModal.workspace) return;
try {
const deletedId = deleteModal.workspace.id;
await deleteWorkspace(deletedId);
@@ -275,15 +276,16 @@ export default function Workspaces() {
<Button
variant="destructive"
disabled={deleteInput !== deleteModal.workspace.name}
onClick={confirmDelete}
className="rounded-xl font-semibold"
type="submit"
form="delete-workspace-form"
className="rounded-xl font-semibold"
>
{t.actions?.delete || 'Delete'}
</Button>
</>
}
>
<div className="flex flex-col gap-4">
<form id="delete-workspace-form" onSubmit={confirmDelete} className="flex flex-col gap-4">
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
{t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
</p>
@@ -294,7 +296,7 @@ export default function Workspaces() {
onChange={(e) => setDeleteInput(e.target.value)}
placeholder={deleteModal.workspace.name}
/>
</div>
</form>
</Modal>
)}
</div>