search

MarkBind / markbind

MarkBind is a tool for generating content-heavy websites from source files in Markdown format
https://markbind.org/
MIT License
135 stars 126 forks source link

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

Open damithc opened 3 years ago

damithc commented 3 years ago

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. image

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. image

The target page looks like this: image

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

Steps to reproduce locally:

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 commented 3 years ago

Also occurs in week 7.

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

jonahtanjz commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

Based on https://github.com/se-edu/se-book/issues/112, this may be caused by popover elements in the page.

damithc commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Simple reproduction: