Keep focus and the confirmation in place around a Quest log removal
CI / ci (push) Successful in 2m56s
CI / ci (pull_request) Successful in 2m41s

After a removal, focus moves to the remove button of the dinner now in
the removed one's place, the one before it when it was the last, or the
Quest log sheet when none is left, instead of the removed row's detached
button. While the DELETE is pending, the confirmation can no longer be
dismissed: Confirm gains a dismissible prop that disables the cancel
button and ignores Escape and the scrim.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-07 04:23:33 -04:00
co-authored by Claude Opus 5.5
parent f4075d15b8
commit 5b334c9181
3 changed files with 109 additions and 6 deletions
+9 -2
View File
@@ -36,6 +36,9 @@ type ConfirmProps = {
confirmLabel: string
cancelLabel?: string
busy?: boolean
// When false, the cancel button, Escape and the scrim do nothing, so the
// sheet stays until the action settles.
dismissible?: boolean
error?: string | null
onCancel: () => void
onConfirm: () => void
@@ -49,13 +52,17 @@ export function Confirm({
confirmLabel,
cancelLabel = 'Cancel',
busy = false,
dismissible = true,
error = null,
onCancel,
onConfirm,
}: ConfirmProps) {
const titleId = useId()
function dismiss() {
if (dismissible) onCancel()
}
return (
<Sheet open={open} onClose={onCancel} aria-labelledby={titleId}>
<Sheet open={open} onClose={dismiss} aria-labelledby={titleId}>
<div className={styles.sheet}>
<h2 id={titleId} className={styles.title}>
{title}
@@ -67,7 +74,7 @@ export function Confirm({
</p>
)}
<div className={styles.actions}>
<Button variant="outline" onClick={onCancel}>
<Button variant="outline" disabled={!dismissible} onClick={onCancel}>
{cancelLabel}
</Button>
<Button disabled={busy} onClick={onConfirm}>