Describe the bug
In _showSubsection() inside scrollspy.js, Line 365 uses the assignment operator = instead of strict comparison === inside a .find() callback. This causes two problems:
It overwrites collapsible.relatedTarget with the active element's href on every iteration (data corruption)
The .find() always returns the first collapsible (since any non-empty href string is truthy), instead of the one matching the active target
To Reproduce
Create a page with a ScrollSpy component that has multiple collapsible subsections
Scroll to activate a subsection that is not the first collapsible
Observe that the wrong subsection height is used, or subsections toggle incorrectly
Expected behavior
_showSubsection() should find the collapsible whose relatedTarget matches the active element's href and expand it with the correct height.
Actual behavior
The .find() callback always returns the first collapsible element because the assignment collapsible.relatedTarget = active.getAttribute("href") evaluates to the href string (truthy), and .find() stops at the first truthy return. Additionally, it silently overwrites the relatedTarget property of every collapsible it iterates over.
Show your code
Root cause in src/js/free/navigation/scrollspy.js, Line 365:
// ❌ CURRENT (Line 365) — uses = (assignment)
const height = this._collapsibles.find((collapsible) => {
return (collapsible.relatedTarget = active.getAttribute("href"));
}).height;
// ✅ FIX — use === (comparison)
const height = this._collapsibles.find((collapsible) => {
return (collapsible.relatedTarget === active.getAttribute("href"));
}).height;
There is also a related bug in refresh() on Line 113:
// ❌ CURRENT — .window is undefined on HTML elements
this._scrollElement === this._scrollElement.window
// ✅ FIX
this._scrollElement === window
Additional context
This is a pure logic bug — the single = is almost certainly a typo. The fix is changing one character (= → ===). I'm happy to submit a PR for this if you'd like.
Describe the bug
In _showSubsection() inside scrollspy.js, Line 365 uses the assignment operator = instead of strict comparison === inside a .find() callback. This causes two problems:
It overwrites collapsible.relatedTarget with the active element's href on every iteration (data corruption)
The .find() always returns the first collapsible (since any non-empty href string is truthy), instead of the one matching the active target
To Reproduce
Create a page with a ScrollSpy component that has multiple collapsible subsections
Scroll to activate a subsection that is not the first collapsible
Observe that the wrong subsection height is used, or subsections toggle incorrectly
Expected behavior
_showSubsection() should find the collapsible whose relatedTarget matches the active element's href and expand it with the correct height.
Actual behavior
The .find() callback always returns the first collapsible element because the assignment collapsible.relatedTarget = active.getAttribute("href") evaluates to the href string (truthy), and .find() stops at the first truthy return. Additionally, it silently overwrites the relatedTarget property of every collapsible it iterates over.
Show your code
Root cause in src/js/free/navigation/scrollspy.js, Line 365:
There is also a related bug in refresh() on Line 113:
Additional context
This is a pure logic bug — the single = is almost certainly a typo. The fix is changing one character (= → ===). I'm happy to submit a PR for this if you'd like.