fix(theme-common): fix issue in tab scroll position restoration on tab click (#8628)

This commit is contained in:
Sébastien Lorber 2023-02-03 12:48:58 +01:00 committed by GitHub
parent faadfad30d
commit 50d6d1e56b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 3 deletions

View file

@ -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 {

View file

@ -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);
}