[cs2103 website] Some site-nav items are not highlighted when open

[damithc]

Deployed site: https://nus-cs2103-ay2021s2.github.io/website/admin/index.html

Clicking on this site-nav item will auto-expand the parent menu and highlight the item in blue after the target page is loaded, as expected.

Problem: If I click on this item, the correct item is highlighted in blue but the parent menu is not auto-expanded after the target page is loaded.

The target page looks like this:

If I expand the parent menu manually, the correct menu item is actually highlighted in blue.

Steps to reproduce locally:

• clone https://github.com/nus-cs2103-AY2021S2/website
• clone the submodule, as explained in the README
• checkout the branch cs2103
• run markbind serve -o

The relevant site-nav code is here https://raw.githubusercontent.com/nus-cs2103-AY2021S2/website/master/_markbind/layouts/sitenav-admin.md

This is not urgent or critical but hope someone can help me locate the problem -- could be a problem in my code rather than a MarkBind bug.

[ang-zeyu]

Also occurs in week 7.

Try removing parts of the page content temporarily and see what happens. Could be caused by something else

[jonahtanjz]

Did some investigation and I believe it's something related to hydration issue after introducing SSR. Somehow after detecting a hydration issue, some of the states get reset, which explains why this issue only affects certain pages. I'm not too familiar with this perhaps @wxwxwxwx9 can take a look at this as well? Similarly, in #1616, the added class dropdown-current gets removed after bailing hydration.

[wxwxwxwx9]

Hmm @jonahtanjz can I check how did you replicate the hydration issue and what is it about? :O

I was able to replicate the bug as described in this issue but couldn't replicate the hydration issue on my side.

[jonahtanjz]

Sorry @wxwxwxwx9 hydration issue is probably not the cause here. Was looking at the wrong page 😓 It occurs on pages without hydration issue as well.

[damithc]

Based on se-edu/se-book#112, this may be caused by popover elements in the page.

[damithc]

Based on se-edu/se-book#112, this may be caused by popover elements in the page.

I experimented with admin/tp-constraints.md file and found that the problem goes away if I remove all <tooltip> elements from the page.

[ang-zeyu]

Confirmed this while working on #1698 as well.

Did some investigation and I believe it's something related to hydration issue after introducing SSR. Somehow after detecting a hydration issue, some of the states get reset, which explains why this issue only affects certain pages. I'm not too familiar with this perhaps @wxwxwxwx9 can take a look at this as well? Similarly, in #1616, the added class dropdown-current gets removed after bailing hydration.

A git bisect reveals the causing PR is indeed the SSR one #1534.

Edit: The second (deleted) part is probably a bad guess

https://ssr.vuejs.org/guide/universal.html#custom-directives
https://ssr.vuejs.org/api/#directives

While bootstrap vue's docs don't seem to mention their directives being incompatible with SSR (I mistakenly assumed so), this could be the case and the cause here.

We could try changing all of our popover / tooltip implementations to use bootstrap vue's components instead.

[ang-zeyu]

Simple reproduction:

• go to a using components page with a popover / tooltip used
• Remove :expanded: from layouts/userGuide.md (line 16 or so)