fix(theme-common): handle zero-duration collapsible transition#12077
fix(theme-common): handle zero-duration collapsible transition#12077DEEP13-2-5 wants to merge 1 commit into
Conversation
|
Hi @DEEP13-2-5! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR updates the Collapsible component to avoid waiting for a transitionend event when the computed height transition duration is zero, and adds Vitest coverage for those cases.
Changes:
- Add runtime detection for “zero-duration height transitions” and invoke the collapse/expand completion callback immediately.
- Refactor transition-end handling to be idempotent via a ref-backed callback.
- Add Vitest tests covering zero-duration vs non-zero-duration height transitions and multi-property transitions.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/docusaurus-theme-common/src/components/Collapsible/index.tsx | Adds computed-style detection for zero-duration height transitions and refactors transition-end completion logic. |
| packages/docusaurus-theme-common/src/components/Collapsible/tests/index.test.tsx | Adds tests to validate immediate completion for zero-duration height transitions and proper waiting otherwise. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
DEEP13-2-5
force-pushed
the
fix/zero-duration-collapsible-transition
branch
from
2e00cf5 to
20c679d
Compare
| function willNotTransitionHeight(el: HTMLElement) { | ||
| const style = getComputedStyle(el); | ||
| const transitionProperties = style.transitionProperty.split(','); | ||
| const transitionDurations = style.transitionDuration.split(','); | ||
|
|
||
| if (!style.transitionDuration || transitionDurations.length === 0) { | ||
| return true; | ||
| } | ||
|
|
||
| const willTransition = transitionProperties.some((property, index) => { | ||
| const propName = property.trim(); | ||
| if (propName === 'height' || propName === 'all') { | ||
| const duration = transitionDurations[index % transitionDurations.length]; | ||
| if (duration !== undefined) { | ||
| const parsedDuration = parseFloat(duration); | ||
| return !isNaN(parsedDuration) && parsedDuration > 0; | ||
| } | ||
| } | ||
| return false; | ||
| }); | ||
|
|
||
| return !willTransition; | ||
| } |
| requestAnimationFrame(() => { | ||
| el.style.height = CollapsedStyles.height; | ||
| el.style.overflow = CollapsedStyles.overflow; | ||
| if (willNotTransitionHeight(el)) { | ||
| onCollapseTransitionEnd.current?.(); | ||
| } | ||
| }); |
| useEffect(() => { | ||
| transitionFinished.current = false; | ||
| collapseTransitionEnd.current = () => { | ||
| if (transitionFinished.current) { | ||
| return; | ||
| } | ||
| transitionFinished.current = true; | ||
| applyCollapsedStyle(collapsibleRef.current!, collapsed); | ||
| onCollapseTransitionEnd?.(collapsed); | ||
| }; | ||
| }, [collapsed, onCollapseTransitionEnd]); |
Summary
Fixes #12063.
This updates the shared
Collapsiblecomponent to handle zero-duration height transitions. In browsers such as Firefox,transitionendmay not fire for0mstransitions, so the component can remain stuck with temporary height/overflow animation styles.The fix detects when the computed
heighttransition duration is zero and runs the existing cleanup path synchronously instead of waiting fortransitionend.Details
The check is scoped to
heightandalltransition properties, so unrelated zero-duration transitions such asopacity 0msdo not bypass normal height transition behavior.A shared completion callback is used for both the native
transitionendpath and the zero-duration fallback, with a guard to avoid duplicate cleanup.Tests
Added regression coverage for:
transitionendtransitionend0msbutheightdoes notValidation
yarn test packages/docusaurus-theme-common/src/components/Collapsible/__tests__/index.test.tsx yarn lint:js --quiet packages/docusaurus-theme-common/src/components/Collapsible/index.tsx packages/docusaurus-theme-common/src/components/Collapsible/__tests__/index.test.tsx yarn workspace @docusaurus/theme-common build git diff --check