feat(theme-classic): store selected tab in query string.

packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx

@@ -31,6 +31,16 @@ function isTabItem(
   return 'value' in comp.props;
 }
 
+const NON_GROUP_TAB_KEY = '__noGroup__';
+function getValueFromSearchParams(groupId = NON_GROUP_TAB_KEY): string | null {
+  if (typeof window === 'undefined') {
+    return null; // Ignore during SSR.
+  }
+  const searchParams = new URLSearchParams(window.location.search);
+  const prevSearchParams = searchParams.get('tabs');
+  return prevSearchParams ? JSON.parse(prevSearchParams)[groupId] : null;
+}
+
 function TabsComponent(props: Props): JSX.Element {
   const {
     lazy,
@@ -69,16 +79,15 @@ function TabsComponent(props: Props): JSX.Element {
         .join(', ')}" found in <Tabs>. Every value needs to be unique.`,
     );
   }
-  // When defaultValueProp is null, don't show a default tab
-  const defaultValue =
-    defaultValueProp === null
-      ? defaultValueProp
-      : defaultValueProp ??
-        children.find((child) => child.props.default)?.props.value ??
-        children[0]!.props.value;
-  if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
+
+  // Warn user about passing incorrect defaultValue as prop.
+  if (
+    defaultValueProp !== null &&
+    defaultValueProp !== undefined &&
+    !values.some((a) => a.value === defaultValueProp)
+  ) {
     throw new Error(
-      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
+      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValueProp}" but none of its children has the corresponding value. Available values are: ${values
         .map((a) => a.value)
         .join(
           ', ',
@@ -87,21 +96,37 @@ function TabsComponent(props: Props): JSX.Element {
   }
 
   const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
-  const tabRefs: (HTMLLIElement | null)[] = [];
-  const {blockElementScrollPositionUntilNextRender} =
-    useScrollPositionBlocker();
-
-  if (groupId != null) {
+  // search params >
+  // local storage >
+  // specified defaultValue >
+  // first child with "default" attr >
+  // first tab item.
+  let defaultValue: string | null | undefined =
+    getValueFromSearchParams(groupId);
+  if (!defaultValue && groupId != null) {
     const relevantTabGroupChoice = tabGroupChoices[groupId];
     if (
       relevantTabGroupChoice != null &&
-      relevantTabGroupChoice !== selectedValue &&
+      relevantTabGroupChoice !== defaultValue &&
       values.some((value) => value.value === relevantTabGroupChoice)
     ) {
-      setSelectedValue(relevantTabGroupChoice);
+      defaultValue = relevantTabGroupChoice;
     }
   }
+  // If we didn't find the right value in search params or local storage,
+  // fallback to props > child with "default" specified > first tab.
+  if (!defaultValue || !values.some((a) => a.value === defaultValue)) {
+    defaultValue =
+      defaultValueProp !== undefined
+        ? defaultValueProp
+        : children.find((child) => child.props.default)?.props.value ??
+          children[0]!.props.value;
+  }
+
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const tabRefs: (HTMLLIElement | null)[] = [];
+  const {blockElementScrollPositionUntilNextRender} =
+    useScrollPositionBlocker();
 
   const handleTabChange = (
     event:
@@ -117,6 +142,18 @@ function TabsComponent(props: Props): JSX.Element {
       blockElementScrollPositionUntilNextRender(newTab);
       setSelectedValue(newTabValue);
 
+      const searchParams = new URLSearchParams(window.location.search);
+      const prevSearchParams = searchParams.get('tabs');
+      const prevVal = prevSearchParams ? JSON.parse(prevSearchParams) : null;
+      const newVal = {[groupId || NON_GROUP_TAB_KEY]: newTabValue};
+      const url = new URL(window.location.origin + window.location.pathname);
+      searchParams.set(
+        'tabs',
+        JSON.stringify(prevVal ? {...prevVal, ...newVal} : newVal),
+      );
+      url.search = searchParams.toString();
+      window.history.replaceState({}, '', url);
+
       if (groupId != null) {
         setTabGroupChoices(groupId, String(newTabValue));
       }