[Bug Fix] AlertDialog: render a native <dialog> and play the exit animation by tvq · Pull Request #518 · ruby-ui/ruby_ui

tvq · 2026-08-28T19:28:19Z

Problem

AlertDialogContent rendered a <template> that the controller cloned to the end of <body> and removed on dismiss: closing was a hard cut, no Escape, no focus trap/restore, the page behind stayed interactive.
Backdrop was bg-black/80 while every other overlay uses bg-background/80.

Change

Native <dialog role="alertdialog"> rendered in place, opened with showModal() — top layer, inert background, focus trap and focus return from the platform. No template/clone, no nested controller.
shadcn/Radix parity: Escape closes (cancel intercepted so the exit animates), backdrop click does not close, focus lands on Cancel (autofocus), Action dismisses too (a link/form submit on it still navigates).
Enter/exit animations on panel and ::backdrop via data-state + tw-animate-css. dismiss() sets data-state="closed", waits for the panel's and the backdrop's exit animations (getAnimations({subtree: true}) on the <dialog> filtered to its own effect.target, their finished promises, a token per run so a superseded run cannot settle a later one), then calls close(). This differs from the animationend block of the other overlays ([Bug Fix] Overlays: play the exit animation before hiding #506): getAnimations() without subtree never lists the ::backdrop, and its events land on the <dialog> under the same keyframe names as the panel's, so that block closed on whichever exit ended first and a stale animationcancel from a previous run could close a new run early. Same block as Dialog ([Bug Fix] Dialog: play the exit animation before closing the native <dialog> #517).
The backdrop gets backdrop:duration-200 so it fades in step with the panel by default (--tw-duration is registered inherits: false, so ::backdrop does not pick the panel's duration up). The controller does not depend on the two matching: a duration-* override closes after the longer of the two.
A second Escape mid-exit is left to the browser (non-cancelable in Chrome, closes at once where it stays cancelable). A close the controller did not start settles the pending run and lifts the body scroll lock, so the next open starts clean; disconnect() lifts it even if the <dialog> is already gone.
Backdrop aligned to bg-background/80 backdrop-blur-sm. Public API and the docs example unchanged.
mcp/data/registry.json rebuilt (separate commit).

Dialog and Combobox get the same treatment in sibling PRs.

Test

cd gem && bundle exec rake — 13 new tests in alert_dialog_test.rb.
Manual, on the AlertDialog docs page:
1. Open → panel and backdrop fade/zoom in, focus is on Cancel, page scroll is locked.
2. Cancel / Escape / Continue → exit animation plays, then the dialog closes, focus returns to the trigger, scroll is restored.
3. Click the backdrop → stays open.
4. Escape twice quickly → closes hard; opening again works normally.
5. AlertDialog(open: true) → open on page load.
Timing cases checked in headless Chrome (CDP), before/after: normal close, Escape once/twice, reopen mid-exit, dismiss mid-enter, disconnect mid-exit and an external close() all close after the 200 ms exit (or at once where the browser closes natively); reopen + re-dismiss within the first frame now runs the full 200 ms (was ~30 ms); a longer duration-* on either panel or backdrop closes after the longer one; requestClose() mid-exit closes at once. No console errors.

🤖 Generated with Claude Code

…mation AlertDialogContent rendered a <template> that the controller cloned to the end of <body> on open and removed on dismiss: closing was a hard cut, there was no Escape handling, no focus trap, no focus restore and the page behind stayed interactive. Render a native <dialog role="alertdialog"> in place and open it with showModal(): top layer, inert background, focus trap and focus return come from the platform. Behaviour matches shadcn/Radix AlertDialog: Escape closes (cancel is intercepted so the exit animates), clicking the backdrop does not, focus lands on Cancel (autofocus), Action dismisses too. Enter and exit animate on the panel and on ::backdrop via data-state and tw-animate-css, settled with the same "Overlay exit" block as ruby-ui#506 (copied unchanged; afterExit() calls dialog.close()). ::backdrop animation events are dispatched on the <dialog> under the same keyframe name, so the backdrop gets backdrop:duration-200 to end together with the panel; with the default 150 ms it settled the close early and cut the panel's exit short. A second Escape during the exit is non-cancelable in Chrome (close watcher) and closes hard; the close listener drops the exit listeners and the body scroll lock so the next open starts clean. The backdrop now uses bg-background/80 like Dialog, Sheet and CommandDialog instead of bg-black/80. Public API and the docs example are unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

cubic-dev-ai

All reported issues were addressed across 6 files

_{Reply with feedback, questions, or to request a fix.

Re-trigger cubic}

shadcn's alert-dialog demo opens from <Button variant="outline">; the primary button is reserved for the confirming action (Continue), with Cancel as outline. Sheet and Drawer docs already follow that convention — this brings AlertDialog in line so triggers read the same across overlays. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…t the <dialog> When the <dialog> target is removed before its controller element (a morph, a partial re-render), `disconnect()` threw on `this.dialogTarget` before it reached the body class, leaving the page scroll locked. Guard the target-specific teardown with `hasDialogTarget`; the class is removed either way. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

…op included The exit block matched animationend/animationcancel by keyframe name, which left two holes on a native <dialog>: - Reopened mid-exit and dismissed again before the next frame, the first run's animationcancel still matched "exit" and closed the dialog under the second run (32 ms instead of 200 ms in headless Chrome). - getAnimations() does not list ::backdrop, so the block only knew the panel while the backdrop's events arrived under the same name; whichever ended first closed the dialog and cut the other as soon as the durations differed (a duration-* override on AlertDialogContent). dismiss() now collects the panel's and the backdrop's CSSAnimations (getAnimations({subtree: true}) filtered to effect.target === dialog), waits on their `finished` promises and settles only when no later dismiss or close superseded the run. A second Escape mid-exit is no longer preventDefault()ed: Chrome makes it non-cancelable anyway, so browsers that keep it cancelable now close at once as well. Same block as Dialog in ruby-ui#517. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Ports two review fixes from the sibling PRs: - disconnect() reached this.dialogTarget unconditionally; a <dialog> removed before its wrapper made Stimulus throw and left the body locked (ruby-ui#518). The target-specific teardown is guarded with hasDialogTarget, the lock is lifted either way. - The body class was removed unconditionally on close and disconnect. A Dialog closed or removed on top of another modal <dialog> (a nested Dialog, a Sheet) unlocked the page under the remaining one (ruby-ui#520). The release is now guarded by `dialog:modal`: the class goes only when no modal <dialog> is left in the document. Verified in headless Chrome: dialog removed before its wrapper — no error, lock lifted; second Dialog closed or removed on top of the first — lock kept while the first is modal, released with it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

cubic-dev-ai

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js">

<violation number="1" location="gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js:71">
P2: When the backdrop has a different exit duration, this filter drops its animation because `effect.target` is a `CSSPseudoElement`, not the dialog. `close()` then runs after the panel animation and cuts off the longer backdrop; include pseudo-element targets whose originating element is `animated`.</violation>
</file>

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

cubic-dev-ai · 2026-09-04T22:31:34Z

+    // subtree: true is what lists the ::backdrop's animation; descendants are filtered back out.
+    const exitAnimations = animated
+      .getAnimations({ subtree: true })
+      .filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated);


P2: When the backdrop has a different exit duration, this filter drops its animation because effect.target is a CSSPseudoElement, not the dialog. close() then runs after the panel animation and cuts off the longer backdrop; include pseudo-element targets whose originating element is animated.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js, line 71: <comment>When the backdrop has a different exit duration, this filter drops its animation because `effect.target` is a `CSSPseudoElement`, not the dialog. `close()` then runs after the panel animation and cuts off the longer backdrop; include pseudo-element targets whose originating element is `animated`.</comment> <file context> @@ -49,47 +48,45 @@ export default class extends Controller { - .getAnimations() - .filter((animation) => animation instanceof CSSAnimation); + .getAnimations({ subtree: true }) + .filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated); - // No exit animation, or no box to run it in: animationend would never fire. </file context>

Suggested change

.filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated);

.filter((animation) => {

const target = animation.effect?.target;

return animation instanceof CSSAnimation && (target === animated || target?.element === animated);

});

tvq and others added 2 commits August 28, 2026 21:27

chore(mcp): rebuild registry for the AlertDialog rewrite

13d7f44

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

tvq requested a review from cirdes as a code owner August 28, 2026 19:28

cubic-dev-ai Bot reviewed Aug 28, 2026

View reviewed changes

Comment thread gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js Outdated

tvq mentioned this pull request Aug 29, 2026

[Bug Fix] Sheet: render a native <dialog> and close on Escape #520

Open

cirdes requested review from djalmaaraujo and removed request for cirdes August 31, 2026 11:53

tvq and others added 4 commits September 4, 2026 23:59

chore(mcp): rebuild registry for the AlertDialog disconnect guard

d280b26

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

chore(mcp): rebuild registry after the AlertDialog controller change

d4a8fbf

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

tvq mentioned this pull request Sep 4, 2026

[Bug Fix] Dialog: play the exit animation before closing the native <dialog> #517

Open

cubic-dev-ai Bot reviewed Sep 4, 2026

View reviewed changes

Navigation Menu

Uh oh!

[Bug Fix] AlertDialog: render a native <dialog> and play the exit animation - #518

[Bug Fix] AlertDialog: render a native <dialog> and play the exit animation#518
tvq wants to merge 7 commits into
ruby-ui:mainfrom
tvq:fix_alert_dialog

tvq commented Aug 28, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment

Uh oh!

cubic-dev-ai Bot Sep 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

-      .filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated);
+      .filter((animation) => {
+        const target = animation.effect?.target;
+        return animation instanceof CSSAnimation && (target === animated || target?.element === animated);
+      });

Uh oh!

Conversation

tvq commented Aug 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Change

Test

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tvq commented Aug 28, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading