From 50d6d1e56bec1bf7b07f32de3dfc0ce9f1fdf192 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Fri, 3 Feb 2023 12:48:58 +0100
Subject: [PATCH] fix(theme-common): fix issue in tab scroll position
 restoration on tab click (#8628)

---
 .../src/utils/scrollUtils.tsx                 |  5 +++-
 .../src/utils/tabsUtils.tsx                   |  6 +++--
 .../_dogfooding/_pages tests/tabs-tests.mdx   | 26 +++++++++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx b/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx
index 8d530ed48abf..78e68a04b1dc 100644
--- a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx
@@ -222,7 +222,10 @@ export function useScrollPositionBlocker(): {
   );
 
   useLayoutEffect(() => {
-    nextLayoutEffectCallbackRef.current?.();
+    // Queuing permits to restore scroll position after all useLayoutEffect
+    // have run, and yet preserve the sync nature of the scroll restoration
+    // See https://github.com/facebook/docusaurus/issues/8625
+    queueMicrotask(() => nextLayoutEffectCallbackRef.current?.());
   });
 
   return {
diff --git a/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx b/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx
index 9a1d47ebdba4..64b3d6446ed2 100644
--- a/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx
@@ -8,11 +8,11 @@
 import React, {
   isValidElement,
   useCallback,
-  useEffect,
   useState,
   useMemo,
   type ReactNode,
   type ReactElement,
+  useLayoutEffect,
 } from 'react';
 import {useHistory} from '@docusaurus/router';
 import {useQueryStringValue} from '@docusaurus/theme-common/internal';
@@ -246,7 +246,9 @@ export function useTabs(props: TabsProps): {
     }
     return value;
   })();
-  useEffect(() => {
+  // Sync in a layout/sync effect is important, for useScrollPositionBlocker
+  // See https://github.com/facebook/docusaurus/issues/8625
+  useLayoutEffect(() => {
     if (valueToSync) {
       setSelectedValue(valueToSync);
     }
diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx
index af7dd77e12d7..6b72ab24f698 100644
--- a/website/_dogfooding/_pages tests/tabs-tests.mdx	
+++ b/website/_dogfooding/_pages tests/tabs-tests.mdx	
@@ -20,3 +20,29 @@ export const isMacOS = typeof window !== 'undefined' && navigator.platform.start
   </Tabs>
 </BrowserWindow>
 ```
+
+## Tabs sync with different heights
+
+```mdx-code-block
+<Tabs groupId="operating-systems">
+  <TabItem value="win" label="Windows">
+    Use Ctrl + C to copy.
+  </TabItem>
+  <TabItem value="mac" label="macOS">
+    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text
+  </TabItem>
+</Tabs>
+```
+
+```mdx-code-block
+<Tabs groupId="operating-systems">
+  <TabItem value="win" label="Windows">
+    Use Ctrl + V to paste.
+  </TabItem>
+  <TabItem value="mac" label="macOS">
+    Use Command + V to paste.
+  </TabItem>
+</Tabs>
+```
+
+When clicking tabs above, they should stay under cursor and we should adjust the scroll position.