Skip to content

fix: pass the animation event to onAnimationEnd - #575

Merged
pradel merged 1 commit into
masterfrom
fix/animation-end-event
Sep 24, 2026
Merged

pradel merged 1 commit into
masterfrom
fix/animation-end-event

Conversation

@pradel

@pradel pradel commented Sep 24, 2026

Copy link
Copy Markdown
Owner

Closes #522.

Problem

onAnimationEnd was declared and called without arguments, so consumers could not inspect what caused the event.

While investigating I found the handler is attached to the modal dialog and React's animationend bubbles, so any animation ending inside the modal triggered the callback. Worse, while closing, a child animation ending would run setShowPortal(false) and unmount the modal before its own exit animation finished.

Fix

  • Pass the React.AnimationEvent<HTMLDivElement> to onAnimationEnd.
  • Ignore events whose target is not the modal element itself, so child animations no longer trigger the callback or unmount the modal early.
  • Updated the prop type and the docs props table. Existing () => void handlers remain assignable, so this is not a breaking change.

Tests

Added regression tests covering:

  • the animation event is passed to onAnimationEnd
  • a child animation does not call onAnimationEnd
  • a child animation while closing does not unmount the modal

The handler dropped the animation event and also reacted to animationend
events bubbling up from elements inside the modal. A child animation
could trigger onAnimationEnd and, while closing, unmount the portal
before the modal exit animation finished.

Pass the React.AnimationEvent to onAnimationEnd and ignore events whose
target is not the modal element itself.

Closes #522
@codecov

codecov Bot commented Sep 24, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.69%. Comparing base (070a1f6) to head (1bb638d).

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #575      +/-   ##
==========================================
+ Coverage   80.40%   80.69%   +0.29%     
==========================================
  Files           7        7              
  Lines         199      202       +3     
  Branches       73       74       +1     
==========================================
+ Hits          160      163       +3     
  Misses         29       29              
  Partials       10       10              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@pradel
pradel merged commit 78a46ea into master Sep 24, 2026
3 checks passed
@pradel
pradel deleted the fix/animation-end-event branch September 24, 2026 17:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Propagate event object to the animationEnd callback

1 participant