Skip to content

Fix(collapse): prevent race condition on rapid accordion clicks - #42844

Open
MohamedAlfeky1 wants to merge 1 commit into
twbs:mainfrom
MohamedAlfeky1:fix-accordion-rapid-click-race-condition
Open

Fix(collapse): prevent race condition on rapid accordion clicks#42844
MohamedAlfeky1 wants to merge 1 commit into
twbs:mainfrom
MohamedAlfeky1:fix-accordion-rapid-click-race-condition

Conversation

@MohamedAlfeky1

Copy link
Copy Markdown

Description

Fixes a race condition in the Collapse plugin when used as an accordion. Rapidly clicking different accordion items in quick succession previously allowed multiple items to remain open simultaneously.

Motivation & Context

When multiple active children exist within an accordion parent (such as one resting and another transitioning), checking only activeChildren[0]._isTransitioning failed if the transitioning element appeared later in DOM order. Additionally, SELECTOR_ACTIVES was previously requiring .collapse.collapsing, which did not match in-flight elements during transition since .collapse is removed.

Fixes:

  1. Updated SELECTOR_ACTIVES to '.collapse.show, .collapsing'.
  2. Filtered out co-targets sharing triggers so multi-target accordion controls continue to toggle together.
  3. Tracked _isExpanding state to guard show() against in-flight sibling expansions.
  4. Added comprehensive Jasmine unit and data-api integration tests to js/tests/unit/collapse.spec.js.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Related issues

Closes #41883

Fix an issue where rapidly clicking different accordion toggle buttons
can cause multiple accordion items to remain open simultaneously.

When multiple active children exist within an accordion parent (such as
one resting and another transitioning), checking only
activeChildren[0]._isTransitioning failed if the transitioning element
appeared later in DOM order.

Tracking expanding state and inspecting all active children prevents
subsequent show() invocations while transitions are in flight.

Fixes twbs#41883
@MohamedAlfeky1
MohamedAlfeky1 requested a review from a team as a code owner August 16, 2026 16:54
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.

Accordion BUG clicking two elements fast enough they both opens

1 participant