From 9cd42c55121f840f53bc532489b83802be970e0f Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 5 Jun 2020 19:56:07 -0400 Subject: [PATCH] fix(v2): Do not automatically change tab when a non-existing option is selected --- .../src/theme/Tabs/index.js | 3 +- website/docs/markdown-features.mdx | 30 +++++++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.js b/packages/docusaurus-theme-classic/src/theme/Tabs/index.js index c3af3c971820..cc08a8c392d0 100644 --- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.js @@ -26,7 +26,8 @@ function Tabs(props) { const relevantTabGroupChoice = tabGroupChoices[groupId]; if ( relevantTabGroupChoice != null && - relevantTabGroupChoice !== selectedValue + relevantTabGroupChoice !== selectedValue && + values.some((value) => value.value === relevantTabGroupChoice) ) { setSelectedValue(relevantTabGroupChoice); } diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index 5a3f849c9ae1..e526a2954ca9 100644 --- a/website/docs/markdown-features.mdx +++ b/website/docs/markdown-features.mdx @@ -348,6 +348,36 @@ You may want choices of the same kind of tabs to sync with each other. For examp Use Command + V to paste. +For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change. + +```jsx + + I am Windows. + I am macOS. + I am Linux. + +``` + + + I am Windows. + I am macOS. + I am Linux. + + --- Tab choices with different `groupId`s will not interfere with each other: