Content tab indicator line displays incorrectly after reload

[jbms]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

The JavaScript code responsible content tabs in the non-insiders version of the theme seems to assume that when the page is first loaded, the first tab will always be selected:

mkdocs-material/src/assets/javascripts/components/content/tabs/index.ts

Line 86 in 366a5ea

active: getElement(`label[for=${inputs[0].id}]`)

Expected behaviour

The indicator line below the tab label should always correspond to the selected tab.

Actual behaviour

In a number of cases the first tab may not be the initially selected one:

• In Chrome: when you select a tab other than the first, click a link to navigate to another page, then use the back command in the browser to go back. Chrome will remember the state of the form controls.
• In Firefox: same as for Chrome, plus in addition if you select a tab other than the first, then refresh the page.

The result is that the indicator line is shown for the wrong element:

Steps to reproduce

1. Generate the documentation for mkdocs-material using the public non-insiders version of the theme.
2. Go to the content tabs page.
3. Select a tab other than the first.
4. Click a link to go to another page.
5. Click the back button.
6. Observe that the indicator line displays incorrectly.

Package versions

• Python: Python 3.9.9
• MkDocs: mkdocs, version 1.2.3
• Material: 366a5ea

Configuration

This theme's own documentation.

System information

• Operating system: Linux
• Browser: Chrome 99

[jbms]

Note: This issue was first identified by @2bndy5

[2bndy5]

Its much easier to re-produce in Firefox:

1. Select a tab that is not the first in a set
2. Hit F5 or the refresh button.
3. Bottom border is highlighted for first tab while the tab content and highlighted label remain consistent.

Initially, I thought this was a problem with my install, but I didn't realize the docs here are on the insider releases.

[squidfunk]

Thanks for reporting. This appears to apply to the community, as well as Insiders edition.

[squidfunk]

Fixed in 6976b9f. Tricky stuff. The interesting fact is that when going back, the browser will set the active tab to the previous tab asynchronously, which btw. is a nice side effect of leveraging form fields. Previous to this commit, the indicator was always set to the first tab on load. Now, content tabs are mounted asynchronously (actually the first time I used the subscribeOn operator after doing RxJS for more than two years now), which should correctly determine the active tab.

[jbms]

Thanks Martin!

[squidfunk]

Released as part of 8.2.8.