[Bug]: Wrong active state in side navigation / table of contents

[dgtlntv]

Describe the bug
On some of our pages / apps the side navigation / table of contents shows the wrong active state.

To Reproduce
On a page like CVEs there is a table of contents on the left. If you click on resources and then on description you can see that resources is still in active state, even though you clicked on description.
https://ubuntu.com/security/CVE-2025-21703

I have seen this issue in the 360 tool as well.

i am filing this here since it seems to be an issue we have in multiple site and apps. So it should probably be fixed at a DS level.

Expected behavior
The thing that is actually currently in view / what was clicked on is the active state in the table of contents / side navigation.

Screenshots

[syncronize-issues-to-jira]

Thank you for reporting your feedback to us!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-19438.

This message was autogenerated

[jmuzina]

Thanks for the bug report and repro steps @dgtlntv . I can indeed reproduce this on the cves page. It seems the correct section is highlighted active when you scroll the page just after clicking on the "description" section.

Digging into this, I think this may be an issue with some IntersectionObserver code that many of our sites have been copying and re-using, not with Vanilla itself.

Here's what that code looks like in the u.com CVE page: https://github.com/canonical/ubuntu.com/blob/a1a4b104e00e60f20ad7704cbac77cbc5eca44a4/templates/security/cves/cve.html#L613-L631

I did some browser debugging and found that the intersection observer is not triggered after clicking the "description" or "status" sections on the CVE you linked, until after scrolling the page. This causes the is-active class to not be removed from the navigation item until after a scroll event. This may have something to do with the intersection observer threshold settings. I'll send this to the sites team and see if they can investigate the JS on their end.

[immortalcodes]

Hey, the issue is a bit different for me
https://www.loom.com/share/16f2aa50f9ac427b8a55c0c9407bc8d0?sid=ddede9c8-6812-42b5-b68e-84ae17e06e58

[jmuzina]

Hey, the issue is a bit different for me https://www.loom.com/share/16f2aa50f9ac427b8a55c0c9407bc8d0?sid=ddede9c8-6812-42b5-b68e-84ae17e06e58

Thanks for the video, @immortalcodes . There could be slightly different behavior in different browsers here, I see you are using Chrome, I am using Firefox. @dgtlntv What browser are you using?

As for the lack of highlighting on the references section in your video, I think this is because of this line of code in u.com, not Vanilla. The intersection observer is being configured to trigger when more than half of a section is visible, but I wonder if this would cause problems when a section is very tall (i.e. the references section, which has a very tall table, 36k px tall on this page in particular).

I was able to "fix" this by modifying the threshold to 0, but this probably isn't what you want as you would like the section that is most visible on the page to be highlighted. I suspect the IntersectionObserver configuration may need to be modified. See this issue which seems to be similar.

The is-active class is not being added to the status section, which is a JS issue outside of the DS. I propose this issue be moved to https://github.com/canonical/ubuntu.com.

2025-02-21.12-11-40.mp4