From 28f05e2fc0e1fae1b3fbcc3624539a4205c3b9dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 26 Sep 2023 15:43:12 +0800
Subject: [PATCH] fix: scrollbar invisible (#237)

---
 src/List.tsx         |  5 ++++-
 tests/scroll.test.js | 45 ++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 5 deletions(-)

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<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
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`,
+    });
+  });
 });