Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content tab indicator line displays incorrectly after reload #3744

Closed
5 tasks done
jbms opened this issue Mar 18, 2022 · 6 comments
Closed
5 tasks done

Content tab indicator line displays incorrectly after reload #3744

jbms opened this issue Mar 18, 2022 · 6 comments

Comments

@jbms
Copy link
Contributor

@jbms jbms commented Mar 18, 2022

Contribution guidelines

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:

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:
content-tabs-issue

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
Copy link
Contributor Author

@jbms jbms commented Mar 18, 2022

Note: This issue was first identified by @2bndy5

@2bndy5
Copy link

@2bndy5 2bndy5 commented Mar 18, 2022

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 squidfunk added the bug label Mar 22, 2022
@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Mar 22, 2022

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

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Mar 26, 2022

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
Copy link
Contributor Author

@jbms jbms commented Mar 26, 2022

Thanks Martin!

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Mar 27, 2022

Released as part of 8.2.8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants