From aec5f4f3dac6bcee24d3fe8026d9d87e6e19a504 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 8 Jan 2025 11:38:41 +0800
Subject: [PATCH] fix: scroll loop in 19

---
 .../TimePanel/TimePanelBody/TimeColumn.tsx    |  7 +++-
 tests/picker.spec.tsx                         | 39 +++++++++++--------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx
index 33544bca6..c7950689d 100644
--- a/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx
+++ b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx
@@ -23,6 +23,11 @@ export interface TimeUnitColumnProps {
   changeOnScroll?: boolean;
 }
 
+// Not use JSON.stringify to avoid dead loop
+function flattenUnits(units: Unit<string | number>[]) {
+  return units.map(({ value, label, disabled }) => [value, label, disabled].join(',')).join(';');
+}
+
 export default function TimeColumn<DateType extends object>(props: TimeUnitColumnProps) {
   const { units, value, optionalValue, type, onChange, onHover, onDblClick, changeOnScroll } =
     props;
@@ -54,7 +59,7 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
       stopScroll();
       clearDelayCheck();
     };
-  }, [value, optionalValue, units.join(',')]);
+  }, [value, optionalValue, flattenUnits(units)]);
 
   // ========================= Change =========================
   // Scroll event if sync onScroll
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index 066eb5e05..be3853ae6 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -1082,21 +1082,25 @@ describe('Picker.Basic', () => {
     });
 
     it('not repeat scroll if disabledTime return same value', () => {
-      const getDisabledTimeFn = () => () => ({
-        disabledHours: () => [10],
-        disabledMinutes: () => [10],
-        disabledSeconds: () => [10],
-      });
+      const getDisabledTimeFn =
+        (num = 10) =>
+        () => ({
+          disabledHours: () => [num],
+          disabledMinutes: () => [num],
+          disabledSeconds: () => [num],
+        });
 
-      const { rerender } = render(
+      const renderDemo = (disabledTime: any) => (
         <DayPicker
           picker="time"
           defaultValue={getDay('2020-07-22 09:03:28')}
           open
-          disabledTime={getDisabledTimeFn()}
-        />,
+          disabledTime={disabledTime}
+        />
       );
 
+      const { rerender } = render(renderDemo(getDisabledTimeFn()));
+
       act(() => {
         jest.advanceTimersByTime(1000);
         jest.clearAllTimers();
@@ -1105,20 +1109,23 @@ describe('Picker.Basic', () => {
 
       // New disabledTime
       triggered = false;
-      rerender(
-        <DayPicker
-          picker="time"
-          defaultValue={getDay('2020-07-22 09:03:28')}
-          open
-          disabledTime={getDisabledTimeFn()}
-        />,
-      );
+      renderDemo(getDisabledTimeFn());
 
       act(() => {
         jest.advanceTimersByTime(1000);
         jest.clearAllTimers();
       });
       expect(triggered).toBeFalsy();
+
+      // New disabledTime but different disabled value
+      triggered = false;
+      rerender(renderDemo(getDisabledTimeFn(11)));
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+        jest.clearAllTimers();
+      });
+      expect(triggered).toBeTruthy();
     });
   });