3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-14 08:42:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

5
packages/docusaurus-theme-common/src/utils/scrollUtils.tsx
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 {

6
packages/docusaurus-theme-common/src/utils/tabsUtils.tsx
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);
}

26
website/_dogfooding/_pages tests/tabs-tests.mdx
View file

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