fix(forms): submit modal actions with enter
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user