4.3.1 - Use of collapse breaks scrollSpy

[yarhouse]

Issue description

When using a simultaneous implementation of multiple collapse functions and scrollSpy for a continous scroll through a nav bar, the use of any collapse will unset/break the scrollSpy, and futhermore cannot seem to be reset or 'refreshed'

Steps to reproduce the issue

http://jsfiddle.net/lopac1029/9ork8Lts/embedded/

1. Scroll to or click to the "Classes" section
2. Click toggle any of the "COLLAPSEABLE [class] Archetypes"
3. Scroll in any direction

What's the expected result?

• The scrollSpy should not change from the current active sidebar nav item until it reaches the next "chapter" element as defined in the scrollSpy init configuration

What's the actual result?

• the scrollSpy becomes completely disconnected from its view location and does not reset

Additional details / screenshot

• binding a var $spy = $('#view').scrollspy('refresh') to the collapse and nav button clicks does nothing to reset the spy
• Operating system: macOS
• Browser: Chrome, Firefox, Safari, and likely others

[Johann-S]

Hi @yarhouse,

Thanks for reporting that behavior !

When the collapse is hidden or shown it change the window's height that's why our Scrollspy is totally lost.
That's definetely an improvement we should be able to handle that

[nikduvall]

I am having a similar issue that I believe could be related to this related issue :

Issue description
When a nav-link is configured to collapse, ScrollSpy will no longer apply the 'active' tag to the element.

Steps to reproduce the issue

1. Set Screen width to >= 779px (NAV compressed to show menu button)
2. Navigate to https://5f021d875c65ec0007e66c61--dev-cynik-org.netlify.app/ - NOTE: This is the preview for the build I created to demonstrate the problem on my own site.
3. Click About link in NAV bar at the top - observe that the 'active' tag is not set
4. Click DuVee Digital link in NAV bar at top - observe that the 'active' tag is set and the background of the link turns blue
5. Scroll the screen back to the top - observe that as the 'About' section enters the viewport, the 'active' tag is removed from the 'DuVee Digital' link, but not applied to the 'About' link.
6. Scroll up and down the screen multiple times using scrollbar, mouse, and links at top and note the behavior persists.
7. Set Screen width to < 779px (NAV uncompressed, links are shown, menu button hidden)
8. Open the Menu and scroll the screen up and down while leaving the menu open - observe that the active tag is applied to the About nav-link and the background changes to blue - this is expected behavior when menu is uncompressed.
9. Scroll the screen until the About nav-link is active then change the screen width back to >= 779px to uncompress the nav - observe the active tag still exists on the About nav-link.
10. Scroll to the bottom of the screen and back to the top - observe the active link change to DuVee Digital, but as you scroll back to the top, the 'active' flag does not get set on the About nav-link.
11. Change the screen width back to < 779px to compress the nav.
12. Click the menu button, select About and observe the menu collapses and scrolls to the About section - this is expected when menu is compressed.
13. Click the menu button, select DuVee Digital and observe the menu remains uncollapsed while the screen scrolls to the DuVee Digital section.
14. Change the screen width back to >= 779px to uncompress the nav and notice that the click state of the DuVee Digital persists with a white background.
15. Navigate up and down the screen scrolling and observe how the active state never returns to the About nav-link after it leaves the viewport.
16. Click back and forth between About and DuVee Digital links and observe how when you click About, DuVee Digital returns to normal, but when you click back on DuVee Digital, it returns to the Compressed click state noted in Actual detailed documentation #14 above.

What's the expected result?
ScrollSpy sets the 'Active' state on the Nav-Links regardless of of screen width being above or below the threshold to toggle the nav bar between showing links or a menu with links at the same time that the Nav-Links are configured to collapse the menu when clicked.

What's the actual result?
Noted in Steps to Produce above

Operating system: macOS Catalina
Browser: Chrome and likely others

[mdo]

Is this something we want to support @twbs/js-review? Feel like if someone is collapsing content, and scrollspy is in use, they would need to trigger an update to scrollspy to refresh the scroll positions. Is this something we need to support, or something others are responsible for entirely?

[XhmikosR]

Ideally, we should handle this case too. It's an edge case but something that we should handle.

[GeoSot]

Tried the above fiddle, using v5.2.0 scripts & replacing scrollspy calls with bootstrap.ScrollSpy.getOrCreateInstance('#view', scrollSpyOpts); and seems to work.

So I am closing the issue