Fix issue where the script doesn't fire on page load or search.

[mikesnoeren]

The Problem/Issue/Bug:

This PR fixes part of this issue by triggering the fixTabs function on page load and on hash change.

Manual testing

Use this link to test, you'll notice the page automatically opening the Linux tab.

[rfay]

Thanks for working on this @mikesnoeren ! Please keep working on it!

If I go to https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#linux on a browser that's setting on the front page... It just lands on https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation, the base page, not on the tab.

However, I see that if I go to https://ddev--4069.org.readthedocs.build/en/4069/users/install/ddev-installation/#windows-wsl2 it does great AND it highlights the Windows WSL2 tab. So I think it's going to work, we just have some miles to walk yet.

Thanks!

[mikesnoeren]

If I go to https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#linux on a browser that's setting on the front page... It just lands on https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation, the base page, not on the tab.

I'm sorry but I can't reproduce that, everything works fine for me.
Could you give me the exact steps to reproduce the issue and the name and version of your browser?

[rfay]

Works for me in incognito also.

[rfay]

Test plan:

For each test, make sure to be on the base page, https://ddev--4069.org.readthedocs.build/en/4069

• Search for "steps". First hit is "Linux", "don't forget docker-ce post-install steps". Click it, you should get to that content. URL is https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#linux
• Search for chocolatey. Second hit is "Docker Desktop for Windows". Click it, you should get to that content, URL is https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#docker-desktop-for-windows
• Search for gitpod. First hit is gitpod.io. Hit it, URL is https://ddev--4069.org.readthedocs.build/en/4069/users/install/ddev-installation/#gitpodio - you should get to the gitpod dont-have-to-install page.
• Search for groupadd. Only hit is linux docker install, https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#linux - link should take you to linux tab
• Search for apt. Only hit is linux ddev install, https://ddev--4069.org.readthedocs.build/en/4069/users/install/ddev-installation/#apt-packages-for-debian-based-systems - Should get the linux tab (didn't work for me)

For each test, open a new tab.

• Visit https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#linux - you should get the linux tab.
• Visit https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#docker-desktop-for-windows - you should get docker desktop tab
• https://ddev--4069.org.readthedocs.build/en/4069/users/install/ddev-installation/#gitpodio - should get to gitpod tab
• https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#linux - should get to linux install tab
• https://ddev--4069.org.readthedocs.build/en/4069/users/install/ddev-installation/#apt-packages-for-debian-based-systems - should get to linux tab

[rfay]

@mikesnoeren I see somewhat unpredictable results. Most things work, but several of those failed. I guess I should look at the console for js errors? And when I return to them they often work. So we obviously have a huge step forward, but I'd appreciate if you could try those various things.

[rfay]

I just tried the first item (macOS, Chrome, incognito) a few times and it failed each time. Searched for steps, got the URL https://ddev--4069.org.readthedocs.build/en/4069/users/install/docker-installation/#linux, it landed on the macOS tab. Edit: Repeatable, nothing in browser console.

Edit: Just tried the same test (not incognito) in Firefox, same result, failed.

[mikesnoeren]

I disabled the navigation.instant feature for mkdocs-material which caused the page to act like a SPA.
This should fix the issues above as the docs now do an actual redirect instead of content injection when using search results..

If the navigation.instant feature is required by someone I can probably get it to work, but as all of my earlier fixes are temporarily this seemed like the best option for now.

[rfay]

Thanks, I'll give it a go!

[rfay]

Thanks so much, absolutely awesome!

[rfay]

Thanks so much for solving this!