Skip to content

fix(accordion): let content overflow the box once open (ARTESCA-17819)#1171

Open
JeanMarcMilletScality wants to merge 1 commit into
development/1.0from
bugfix/accordion-overflow-when-open
Open

fix(accordion): let content overflow the box once open (ARTESCA-17819)#1171
JeanMarcMilletScality wants to merge 1 commit into
development/1.0from
bugfix/accordion-overflow-when-open

Conversation

@JeanMarcMilletScality

@JeanMarcMilletScality JeanMarcMilletScality commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

TL;DR — Content opened inside an Accordion (a Select menu, 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: hidden so the height transition clips cleanly. But that also clips anything a child legitimately renders outside the box — most visibly a Select/dropdown menu opened near the bottom, which got cut off at the accordion border. ARTESCA-17819.

Approach

Keep overflow: hidden only while the open/collapse height transition runs (so the animation still clips), then flip to overflow: visible once opening is done:

  • an isExpanded state gates overflow and is set on the content's own height transitionEnd (guarded with e.target === e.currentTarget so a descendant's bubbled height transition doesn't flip it early);
  • isExpanded initializes to open, so an initially-open accordion is visible from mount and never depends on a transition that wouldn't fire on first paint;
  • closing resets isExpanded, so the collapse animation clips again.

⚠️ Merge note — reconcile with #1170

This PR and #1170 (fix(accordion): follow content height) both touch the Accordion's overflow/height handling but solve different bugs:

this PR #1170
menu/popover escapes the box when open
box resizes when content grows/shrinks after open ❌ (locked height → content spills)

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

  • StorybookAccordionWithSelectAtBottom: open the Select near the bottom; its menu overflows past the accordion border and stays fully visible/scrollable.
  • Jestnpx jest src/lib/components/accordion

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>
@bert-e

bert-e commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval
/bypass_build_status Bypass the build and test status
/bypass_commit_size Bypass the check on the size of the changeset TBA
/bypass_incompatible_branch Bypass the check on the source branch prefix
/bypass_jira_check Bypass the Jira issue check
/bypass_peer_approval Bypass the pull request peers' approval
/bypass_leader_approval Bypass the pull request leaders' approval
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request TBA
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e

bert-e commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

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.

2 participants