diff --git a/src/List.tsx b/src/List.tsx index 48f7843..b7cd8f9 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -265,7 +265,10 @@ export function RawList(props: ListProps, ref: React.Ref) { const [size, setSize] = React.useState({ width: 0, height }); const onHolderResize: ResizeObserverProps['onResize'] = (sizeInfo) => { - setSize(sizeInfo); + setSize({ + width: sizeInfo.width || sizeInfo.offsetWidth, + height: sizeInfo.height || sizeInfo.offsetHeight, + }); }; // Hack on scrollbar to enable flash call diff --git a/tests/scroll.test.js b/tests/scroll.test.js index c29f945..fb06d5d 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -5,6 +5,8 @@ import { spyElementPrototypes } from './utils/domHook'; import List from '../src'; import { createEvent, fireEvent, render } from '@testing-library/react'; import { resetWarned } from 'rc-util/lib/warning'; +import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil'; +import '@testing-library/jest-dom'; function genData(count) { return new Array(count).fill(null).map((_, index) => ({ id: String(index) })); @@ -12,6 +14,10 @@ function genData(count) { describe('List.Scroll', () => { let mockElement; + let boundingRect = { + width: 100, + height: 100, + }; beforeAll(() => { mockElement = spyElementPrototypes(HTMLElement, { @@ -21,10 +27,7 @@ describe('List.Scroll', () => { clientHeight: { get: () => 100, }, - getBoundingClientRect: () => ({ - width: 100, - height: 100, - }), + getBoundingClientRect: () => boundingRect, offsetParent: { get: () => document.body, }, @@ -36,6 +39,10 @@ describe('List.Scroll', () => { }); beforeEach(() => { + boundingRect = { + width: 100, + height: 100, + }; jest.useFakeTimers(); }); @@ -436,4 +443,34 @@ describe('List.Scroll', () => { ).style.background, ).toEqual('blue'); }); + + it('scrollbar size should correct', async () => { + boundingRect = { + width: 0, + height: 0, + }; + + const { container } = genList( + { + itemHeight: 20, + height: 100, + data: genData(100), + }, + render, + ); + + await act(async () => { + onLibResize([ + { + target: container.querySelector('.rc-virtual-list-holder'), + }, + ]); + + await Promise.resolve(); + }); + + expect(container.querySelector('.rc-virtual-list-scrollbar-thumb')).toHaveStyle({ + height: `10px`, + }); + }); });