diff --git a/packages/@react-aria/virtualizer/src/ScrollView.tsx b/packages/@react-aria/virtualizer/src/ScrollView.tsx index 348abd8b5a2..b57347f9dd4 100644 --- a/packages/@react-aria/virtualizer/src/ScrollView.tsx +++ b/packages/@react-aria/virtualizer/src/ScrollView.tsx @@ -38,6 +38,8 @@ interface ScrollViewProps extends HTMLAttributes { scrollDirection?: 'horizontal' | 'vertical' | 'both' } +let isOldReact = React.version.startsWith('16.') || React.version.startsWith('17.'); + function ScrollView(props: ScrollViewProps, ref: RefObject) { let { contentSize, @@ -148,7 +150,25 @@ function ScrollView(props: ScrollViewProps, ref: RefObject) { useLayoutEffect(() => { updateSize(); }, [updateSize]); - useResizeObserver({ref, onResize: updateSize}); + let raf = useRef | null>(); + let onResize = () => { + if (isOldReact) { + raf.current ??= requestAnimationFrame(() => { + updateSize(); + raf.current = null; + }); + } else { + updateSize(); + } + }; + useResizeObserver({ref, onResize}); + useEffect(() => { + return () => { + if (raf.current) { + cancelAnimationFrame(raf.current); + } + }; + }, []); let style: React.CSSProperties = { // Reset padding so that relative positioning works correctly. Padding will be done in JS layout. diff --git a/packages/@react-spectrum/list/test/ListView.test.js b/packages/@react-spectrum/list/test/ListView.test.js index 84764c5f368..2ba182c84cf 100644 --- a/packages/@react-spectrum/list/test/ListView.test.js +++ b/packages/@react-spectrum/list/test/ListView.test.js @@ -1426,6 +1426,9 @@ describe('ListView', function () { act(() => { fireEvent(window, new Event('resize')); }); + act(() => { + jest.runAllTimers(); + }); await user.tab(); expect(grid.scrollTop).toBe(0); @@ -1475,6 +1478,9 @@ describe('ListView', function () { act(() => { fireEvent(window, new Event('resize')); }); + act(() => { + jest.runAllTimers(); + }); expect(grid.scrollTop).toBe(0); focusRow(tree, 'Item 1');