fix(accordion): let content overflow the box once open (ARTESCA-17819)#1171
Open
JeanMarcMilletScality wants to merge 1 commit into
Open
fix(accordion): let content overflow the box once open (ARTESCA-17819)#1171JeanMarcMilletScality wants to merge 1 commit into
JeanMarcMilletScality wants to merge 1 commit into
Conversation
An open Accordion clipped anything that extended past its box — a Select menu, dropdown or tooltip opened inside it was cut off by the animation's `overflow: hidden`. Keep `overflow: hidden` only while the open/collapse height transition is running (so the animation still clips cleanly), then switch to `overflow: visible` once the accordion has finished opening, tracked via an `isExpanded` state set on the content's own height `transitionEnd`. An initially-open accordion starts expanded, so it never depends on a transition that would not fire on mount. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Hello jeanmarcmilletscality,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR — Content opened inside an
Accordion(aSelectmenu, dropdown or tooltip) is no longer clipped by the box: once the accordion has finished opening, its content is allowed to overflow.Context
The Accordion animates with
overflow: hiddenso the height transition clips cleanly. But that also clips anything a child legitimately renders outside the box — most visibly aSelect/dropdown menu opened near the bottom, which got cut off at the accordion border. ARTESCA-17819.Approach
Keep
overflow: hiddenonly while the open/collapse height transition runs (so the animation still clips), then flip tooverflow: visibleonce opening is done:isExpandedstate gatesoverflowand is set on the content's own heighttransitionEnd(guarded withe.target === e.currentTargetso a descendant's bubbled height transition doesn't flip it early);isExpandedinitializes toopen, so an initially-open accordion is visible from mount and never depends on a transition that wouldn't fire on first paint;isExpanded, so the collapse animation clips again.This PR and #1170 (
fix(accordion): follow content height) both touch the Accordion'soverflow/height handling but solve different bugs:They're complementary — combined, the box follows its content height (nothing spills) and overflow is visible (popovers escape). Whoever merges second must integrate both mechanisms rather than let one overwrite the other.
How to test
WithSelectAtBottom: open theSelectnear the bottom; its menu overflows past the accordion border and stays fully visible/scrollable.npx jest src/lib/components/accordion