Broken/missing lesson navigation

[denkasyanov]

During previous couple updates I noticed that sidebar navigation is sometimes broken and sometimes parts of it are missing.

Below is an example of missing links.

I'll add more screenshots with different kind of issues when I encounter it.

Steps before this issue:

1. I updated kcdshop with npx update-epic-workshop
2. Started it with npm start.
3. Watched a video in the previous lesson in full screen, marked two exercises as complete. Skipped google forms because captcha is unbearable (but I digress).
4. Pressed ">" button to open the next lesson.

Refreshing the page fixes it until next time

[kentcdodds]

Thanks for reporting! This is very odd. I cannot reproduce the issue. Could you do a little debugging for me? Check the console for errors and check the DOM over there for odd CSS rules being applied or something?

[denkasyanov]

Both Chrome console and server console show no errors.

I had to removed two opacity style properties to show it again, on ul and li.
opacity: 0 returns after some time or after I switch to another tab and return back.

Probably I shared what I found in a very dumb way. Please let me know if there is a better way to do it 😅

I also disabled uBlock Origin before that (no difference).

[denkasyanov]

Aand another one

Steps:

1. I returned to the page
2. Rewatched the end of the video
3. Clicked on top left menu to open sidebar
4. One bar disappared from the open menu button
5. The sidebar doesn't open no matter how many times I click this button

This time there are errors in the chrome console

[kentcdodds]

Could you try disabling the Google translate extension?

[denkasyanov]

Completed the first lesson in the next workshop with Google translate extension disabled.
And the first issue appeared again right after I moved to the next lesson.

I guess I'm ok with refreshing the page.

[kentcdodds]

Dang. This is so weird. I've not had reports from anyone else so I'm thinking it's probably something wrong with an extension you've got or something. Sorry!

[denkasyanov]

After some additional testing, I believe the offending extension is 1Password https://chromewebstore.google.com/detail/1password-%E2%80%93-password-mana/aeblfdkhhhdcdjpifhhbdiojplfjncoa

I completed a couple of lessons without 1Password extension in freshly installed Brave browser. Didn't use this browser before. No issues with the sidebar.

Tried different combinations of my usual extensions and very soon after I enable 1Password (with or with no other extensions) the issues appear in Brave as well.

I don't know the exact order of steps to reliably reproduce it.

However, this time, right after I installed it in Brave (and it connected to 1Passowrd desktop app) and tried to close the sidebar, this happened

Something like this happened in Chrome as well.

[denkasyanov]

Actually, it happens even without extensions.

I'm in the DATA MODELING DEEP DIVE workshop.

First scenario, in which everything works fine.

• I'm on page "Updating Data" (http://localhost:5639/07)
• Click on "SQL" section in the sidebar
• SQL section reveals with all lessons visible

Second scenario

• I'm on page "Updating Data" (http://localhost:5639/07)
• Click "Elaboration" lesson in this section (http://localhost:5639/07/finished)
• The lesson is completed
• Click two times (complete -> uncomplete -> complete)
• See the confetti animation
• Click the right arrow button to go to the next lesson (1)
• Boom, items in the menu are invisible (2)

---

(1)

(2)

Notes:

• If I click only one time to uncomplete elaboration (no confetti) menu works fine
• Above scenarios were tested in Brave browser. No extensions at all, even disabled.
• Exactly the same thing is happening in Safari
• Looks like confetti in any other lessons leads to the same issue with menu. Also, when navigating via sidebar menu, not necessarily using the button under the complete lesson checkbox. Reproduced both in pristine Brave and regular Safari.
• The same issue with confetti on windows 11 in Chrome and Edge

[kentcdodds]

Ah! I reproduced it using the steps you provided! Phew! Thank you for coming up with these steps.

I see some relevant errors in the console:

This is helpful. Thank you!

[d3vl1m3]

Perfect. Yeah. I found the same issue recently as well. Great to see it's already been highlighted :)

Screen capture of issue if it's of any help. Issue is absolutely when marking something as complete and navigating to another menu item:

Screencast.from.03-04-24.15.33.16.webm

[kentcdodds]

I think this has been fixed. Anyone care to verify?