Debounce dropdown/accordion arrow toggle mid-animation (#1012)#1263
Debounce dropdown/accordion arrow toggle mid-animation (#1012)#1263IshanA2007 wants to merge 1 commit into
Conversation
The school-header chevron on the browse page animates via
`transition: transform var(--duration-normal)` (~200ms). The click
handler did a naked `classList.toggle('is-open')`, so rapid clicks
re-toggled the class before the transform finished, leaving the arrow
flipped inconsistently relative to its animation.
Guard the toggle with an `is-animating` lock: ignore clicks while the
chevron transition is in flight, clearing the lock on the chevron's
`transitionend` (transform) event with a 300ms time-based fallback for
cases where the event never fires (reduced motion, zero-duration, or an
off-screen element). Keyboard/Enter activation is unaffected since it
dispatches the same guarded click handler.
|
Warning Review limit reached
Next review available in: 59 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Closes #1012
Problem
Rapidly clicking a dropdown/accordion header flipped the chevron arrow inconsistently — a second click landed mid-transition (the chevron animates ~200ms via
--duration-normal) while the handler did a bareclassList.toggle('is-open')with no guard, leaving the arrow out of sync with the open/closed state.Fix
Added an
is-animatinglockout to the browse-page school accordion (tcf_website/templates/site/catalog/browse.html): clicks are ignored while the chevron transition is in flight, released on the chevron'stransitionend(transform) with a 300mssetTimeoutfallback forprefers-reduced-motion/zero-duration cases. Keyboard/Enter activation is preserved; no new libraries.Scope note
The FAQ accordion named in the original report was removed in the v2 UI rewrite. I audited every
rotate(180deg)arrow in the codebase — the browse school accordion is the only live, JS-driven toggle with this race. Intentionally left alone: the header user-menu / recent-items dropdowns (popovers that legitimately close on re-click), native<details>/<summary>elements (rotation driven by the browser, not JS), and the.accordion__*CSS (dead after the v2 rewrite).Verification
animatingguard and is ignored until the chevron settles; single-click and keyboard activation are unaffected; the fallback timer guarantees the lock always clears (no deadlock).--checksyntax validation of the inline JS block passed.Caveat
.school-headeris a<div>with notabindex/roletoday, so it isn't keyboard-focusable — a pre-existing a11y gap left unchanged (out of scope for this fix).🤖 Implemented with Claude Code.