Insiders (2022-01-07): Linked content tabs flickering/jumping

[tiangolo]

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

Note: This is only related to linked content tabs, configured with content.tabs.link, and so, only happens in MkDocs Insiders.

On some occasions, when using multiple tab groups with linked tabs, some of the tabs can't be directly opened. When clicking them they flicker and don't change (as if they changed to the intended tab and then back again in a couple of milliseconds).

I don't know the reason yet, I have a minimal reproduction example, but I have no clue how things are related.

Expected behaviour

When clicking Tab 2 in the second group I would expect it to switch to Tab 2. I would also expect it to switch group one to Tab 2.

Actual behaviour

When clicking Tab 2 on the second group, it flickers and never changes, although the indicator of the current tab in the second group does change.

Steps to reproduce

• Install MkDocs Insiders (as of 2022-01-07).
• Create this file mkdocs.yml:

site_name: MkDocs Insiders Problem Example
theme:
  name: material
  features:
  - content.tabs.link
nav:
- index.md
markdown_extensions:
- pymdownx.tabbed:
    alternate_style: true

• Create this file docs/index.md:

# Problem Example

=== "Tab 1"

    First group. **Tab 1**. Works fine.

=== "Tab 2"

    First group. **Tab 2**. Yay, this works!?

    Remove this line with `inline code formatting` to disable/enable the issue.

Some text in the middle.

Click the two tabs below to trigger the issue.

=== "Tab 1"

    Second group. **Tab 1**. Oh, no, can't switch!

=== "Tab 2"

    Second group. **Tab 2**. Neeeeein!

• Serve it with mkdocs serve.

• Click Tab 2 on the second group of tabs.

• It flickers but doesn't change. 😔

• Bonus:

Remove this line from docs/index.md:

Remove this line with `inline code formatting` to disable/enable the issue

...and even though the line is in tab group one, the issue disappears almost completely. 😱

---

I say "almost completely" because now the tabs can be switched, and are in sync. And the tab name text highlighting is in sync too. But the little line under the tab text in other tab groups is not in sync with the text highlighting:

Here I clicked the "Tab 2" of the first group. The "Tab 2" of the second group was also selected, perfect. And the "Tab 2" text in the second group was highlighted, perfect. But the blue underline of the second group stayed under "Tab 1".

This last part is a small detail, but not a blocker as the first part.

Package versions

• Python: python --version: Python 3.7.5
• MkDocs: mkdocs --version: version 1.2.3
• Material: pip show mkdocs-material | grep -E ^Version: Version: 8.1.4+insiders.4.5.1

Configuration

site_name: MkDocs Insiders Problem Example
theme:
  name: material
  features:
  - content.tabs.link
nav:
- index.md
markdown_extensions:
- pymdownx.tabbed:
    alternate_style: true

System information

• Operating system: Ubuntu Linux
• Browser: Verified in Ubuntu Chrome, Chrome new Incognito Window, Ubuntu Firefox, Android Chrome (mobile)

[squidfunk]

Thanks for reporting!

Here I clicked the "Tab 2" of the first group. The "Tab 2" of the second group was also selected, perfect. And the "Tab 2" text in the second group was highlighted, perfect. But the blue underline of the second group stayed under "Tab 1".

Jup, this was already reported in #3440 😊

[tiangolo]

Oh, dang it, I missed that.

But the first part (which is the main problem for me) was not covered there, right?

If you see all this is part of the same problem, feel free to close this one! 🤓

[squidfunk]

Nope, the first part is new. Thanks for providing such a detailed report. I can already reproduce it and will try to find the root cause.

[tiangolo]

Awesome, thanks! 🙇

[squidfunk]

Okay, I think I've got a fix in bd4b472. It's from the category "how did that ever work?" and seems to be a v8 regression. There was a race condition in the actual linking mechanism, and the state wasn't correctly restored from local storage as the implementation wasn't compatible with alternate_syle, which is now the only supported tabs style. #3440 was also fixed.

Ohne.Titel.mp4

If you reinstall Insiders, the issue should be gone.

[squidfunk]

Released as part of 8.1.4-insiders-4.5.2.

[tiangolo]

Amazing, that was so fast! Thank you! 👏🙇🎉