Skip to content

Add regression test for accordion rapid-click exit animation (#2674)#3725

Draft
mattgperry wants to merge 1 commit into
mainfrom
worktree-fix-issue-2674
Draft

Add regression test for accordion rapid-click exit animation (#2674)#3725
mattgperry wants to merge 1 commit into
mainfrom
worktree-fix-issue-2674

Conversation

@mattgperry
Copy link
Copy Markdown
Collaborator

Summary

Adds a Cypress regression test for the accordion rapid-click scenario reported in #2674 (motion.section with an explicit `key` inside `AnimatePresence`, rapidly toggled open/closed).

Investigation

The original CodeSandbox could not be fetched (CloudFlare-blocked), so the test reconstructs the scenario from the reporter's description and screenshots:

  • Multiple accordion items, each with its own `AnimatePresence`
  • A keyed `motion.section` conditionally rendered inside
  • `height: 0` ↔ `height: "auto"` enter/exit

The reporter observed visual glitches under rapid clicking and noted that removing the `key` from the `motion.section` resolved it.

I could not reproduce the bug against the current codebase. All three test variants pass (open mid-exit, close mid-enter, 5x rapid toggle) on both React 18 and React 19 without any code changes.

The issue was filed in May 2024, and numerous `AnimatePresence` rapid-switching / re-entry fixes have landed since — likely resolving it transitively:

  • `90d8c5364` Fix AnimatePresence not removing children when exit matches current values
  • `10427ae38` Fix AnimatePresence stuck when state changes too fast in mode='wait'
  • `6a8d3abb9` Fix AnimatePresence re-entry: replay enter animation when exit completed
  • `05842be0d` Fix AnimatePresence wrong animation direction when key re-enters during exit
  • `8798d7017` Fix AnimatePresence keeping exiting children in DOM during rapid updates with dynamic variants
  • `aa8b46be3` Fix duplicate exit animation processing in AnimatePresence

The test is included as a forward regression gate covering the specific keyed-child accordion pattern, so any future regression in this area would be caught immediately.

Opening as draft because no production code is changed — please confirm whether the bug is indeed considered resolved and the test should land on its own. If it should be closed without merging, that's also fine.

Fixes #2674

Test plan

  • `yarn build` passes
  • `yarn test` passes (776 tests)
  • New Cypress spec passes on React 18
  • New Cypress spec passes on React 19

Covers an accordion item with a keyed motion.section inside
AnimatePresence under rapid toggle sequences. Verifies that
re-opening mid-exit, closing mid-enter, and 5x rapid toggles all
settle into the correct final state.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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.

[BUG] Exit animation with Next.js

1 participant