Insiders (2022-01-07): Linked content tabs flickering/jumping #3445
Description
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
mkdocsorreadthedocsthemes - ... the problem persists when all overrides are removed, i.e.
custom_dir,extra_javascriptandextra_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: trueSystem information
- Operating system: Ubuntu Linux
- Browser: Verified in Ubuntu Chrome, Chrome new Incognito Window, Ubuntu Firefox, Android Chrome (mobile)