fix: sync controlled scrollbar visibility

Author: nrps9909

src/ScrollBar.tsx

@@ -75,14 +75,14 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   const [visible, setVisible] = React.useState(showScrollBar);
   const visibleTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
-  const delayHidden = () => {
+  const delayHidden = useEvent(() => {
     if (showScrollBar === true || showScrollBar === false) return;
     clearTimeout(visibleTimeoutRef.current);
     setVisible(true);
     visibleTimeoutRef.current = setTimeout(() => {
       setVisible(false);
     }, 3000);
-  };
+  });
 
   // ======================== Range =========================
   const enableScrollRange = scrollRange - containerSize || 0;
@@ -134,10 +134,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
       nextTop = pagePosition - rect.top - spinSize / 2;
     }
 
-    onScroll(
-      getScrollOffsetByThumbTop(nextTop, enableScrollRange, enableOffsetRange),
-      horizontal,
-    );
+    onScroll(getScrollOffsetByThumbTop(nextTop, enableScrollRange, enableOffsetRange), horizontal);
   };
 
   const onContainerMouseDown: React.MouseEventHandler = (e) => {
@@ -255,11 +252,17 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   }, [dragging]);
 
   React.useEffect(() => {
-    delayHidden();
+    if (showScrollBar === true || showScrollBar === false) {
+      clearTimeout(visibleTimeoutRef.current);
+      setVisible(showScrollBar);
+    } else {
+      delayHidden();
+    }
+
     return () => {
       clearTimeout(visibleTimeoutRef.current);
     };
-  }, [scrollOffset]);
+  }, [scrollOffset, showScrollBar, delayHidden]);
 
   // ====================== Imperative ======================
   React.useImperativeHandle(ref, () => ({

tests/scroll.test.js

@@ -409,6 +409,34 @@ describe('List.Scroll', () => {
       const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible');
       expect(scrollbarElement).not.toBeNull();
     });
+
+    it('syncs scrollbar visibility when showScrollBar changes', () => {
+      const props = {
+        itemHeight: 20,
+        height: 100,
+        data: genData(100),
+        showScrollBar: false,
+      };
+      const { container, rerender } = genList(props);
+      const getScrollbar = () => container.querySelector('.rc-virtual-list-scrollbar-vertical');
+
+      expect(getScrollbar()).not.toHaveClass('rc-virtual-list-scrollbar-visible');
+
+      rerender(genNode({ ...props, showScrollBar: true }));
+      expect(getScrollbar()).toHaveClass('rc-virtual-list-scrollbar-visible');
+
+      rerender(genNode(props));
+      expect(getScrollbar()).not.toHaveClass('rc-virtual-list-scrollbar-visible');
+
+      rerender(genNode({ ...props, showScrollBar: 'optional' }));
+      expect(getScrollbar()).toHaveClass('rc-virtual-list-scrollbar-visible');
+
+      act(() => {
+        jest.advanceTimersByTime(3000);
+      });
+      expect(getScrollbar()).not.toHaveClass('rc-virtual-list-scrollbar-visible');
+    });
+
     describe('not show scrollbar when disabled virtual', () => {
       [
         { name: '!virtual', props: { virtual: false } },