fix(theme-common): fix issue in tab scroll position restoration on ta…

…b click (#8628)
facebook · Feb 3, 2023 · cc767ed · cc767ed
1 parent ed13d5c
commit cc767ed
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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.