fix: scroll loop in 19

react-component · Jan 8, 2025 · aec5f4f · aec5f4f
1 parent f3694a6
commit aec5f4f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git 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
@@ -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();
     });
   });