Accordion/Collapse and ScrollSpy refresh

Created by: pludikar

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

I wouldn't necessarily classify this as a "bug" per se, but it is definitely missing a very necessary behaviour, particularly if Bootstrap's goal is to keep things clean and easy to use.

ScrollSpy.refresh() does not appear to compensate for the scrollTop position when refreshing scroll highlight points.

With ScrollSpy monitoring a <DIV> that is full of Accordioned sections:

uncollapse a section
then trigger an event (eg with a button onclick) which invokes bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()).

The active class on the index stops being synchronised (scroll position and index highlight are unrelated). This is particularly obvious when a section low down is uncollapsed.

It appears that ScrollSpy.refresh() only works properly if the monitored <DIV> is scrolled to the top.

There's a work around/fix that shows that not being scrolled to the top is the issue - before the refresh() call add

scrollpos = dataSpyEl.scrollTop;  
dataSpyEl.scrollTop = 0;

after the refresh() call add dataSpyEl.scrollTop = 0;

Your example on ScrollSpy documentation here only really works on a document.ready event, it won't on a general event case.

You can see this in action here in Codepen.

Comment out lines 15, 16 and 19 (Highlighted by Comments) of the Codepen code to see the unsynchronised issue.

I would suggest that the "fix" should be incorporated into the refresh() function to allow for general Event case use. I feel the "fix" is just a work around.

Reduced test cases

CodePen link as referenced above. Note: the additional HTML markup comes from the Joomla page I scraped.

The setTimeout has been added to ensure that both bootstrap is available, and the page has definitely finished rendering.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.1 (latest)