fix: scrollbar invisible (#237)

Author: zombieJ

src/List.tsx

@@ -265,7 +265,10 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   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

tests/scroll.test.js

@@ -5,13 +5,19 @@ 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) }));
 }
 
 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`,
+    });
+  });
 });