diff --git a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx b/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx
index 8d530ed48a..78e68a04b1 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 9a1d47ebdb..64b3d6446e 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 af7dd77e12..6b72ab24f6 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 sync with different heights
+
+```mdx-code-block
+
+
+ Use Ctrl + C to copy.
+
+
+ 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
+
+
+```
+
+```mdx-code-block
+
+
+ Use Ctrl + V to paste.
+
+
+ Use Command + V to paste.
+
+
+```
+
+When clicking tabs above, they should stay under cursor and we should adjust the scroll position.