Skip to content

ScrollSpy: clear the active class from menu toggle buttons - #43280

Open
b84330808 wants to merge 1 commit into
twbs:mainfrom
b84330808:scrollspy-clear-menu-toggle-button
Open

b84330808 wants to merge 1 commit into
twbs:mainfrom
b84330808:scrollspy-clear-menu-toggle-button

Conversation

@b84330808

Copy link
Copy Markdown

Description

  • When a link inside a .menu becomes active, _activateParents() also adds .active to the menu toggle.
  • _clearActiveClass() only removed .active from [href] elements. The navbar docs use <button class="nav-link" data-bs-toggle="menu"> toggles, so the toggle kept .active after a link outside the menu became active. Two nav items then looked active.
  • _clearActiveClass() now also clears [data-bs-toggle="menu"].active.
  • A new test in js/tests/unit/scrollspy.spec.js scrolls to a section linked from the menu, then back to a section linked from the nav. It fails before the change (expected BUTTON not to have class "active") and passes after it. The full unit suite passes (1374 tests).

Motivation & Context

  • A scrollspy navbar with a menu, built like the navbar docs, highlights the menu toggle and the current nav link at the same time.

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

Live previews

  • Not applicable, JavaScript only.

Related issues

  • None found.

I used Claude Code to write this change.

When a link inside a menu becomes active, ScrollSpy also adds `.active`
to the menu toggle. It only removed `.active` from `[href]` elements on
the next activation, so a `<button data-bs-toggle="menu">` toggle, as in
the navbar docs, stayed active after a link outside the menu took over.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@b84330808
b84330808 requested a review from a team as a code owner November 3, 2026 15:59
@julien-deramond julien-deramond added v6 v6, the main branch bug Something does not work as documented js JavaScript or TypeScript sources and plugins labels Nov 3, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something does not work as documented js JavaScript or TypeScript sources and plugins v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants