fix: React 19 scroll sync

react-component · Jan 7, 2025 · 28f4b86 · 28f4b86
1 parent ad3a1f7
commit 28f4b86
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx
@@ -54,7 +54,7 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
       stopScroll();
       clearDelayCheck();
     };
-  }, [value, optionalValue, units]);
+  }, [value, optionalValue, units.join(',')]);
 
   // ========================= Change =========================
   // Scroll event if sync onScroll

diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
@@ -292,9 +292,7 @@ describe('Picker.Basic', () => {
 
     // https://github.com/ant-design/ant-design/issues/49400
     it('should not throw errow when input end year first', () => {
-      const { container } = render(
-        <DayRangePicker picker="year" />,
-      );
+      const { container } = render(<DayRangePicker picker="year" />);
       openPicker(container);
       fireEvent.focus(container.querySelectorAll('input')[1]);
       expect(() => {
@@ -369,7 +367,7 @@ describe('Picker.Basic', () => {
     it('pass tabIndex', () => {
       const { container } = render(
         <div>
-          <DayPicker tabIndex={-1}/>
+          <DayPicker tabIndex={-1} />
         </div>,
       );
 
@@ -583,12 +581,7 @@ describe('Picker.Basic', () => {
   });
 
   it('prefix', () => {
-    render(
-      <DayPicker
-        prefix={<span className="prefix" />}
-        allowClear
-      />,
-    );
+    render(<DayPicker prefix={<span className="prefix" />} allowClear />);
     expect(document.querySelector('.prefix')).toBeInTheDocument();
   });
 
@@ -1064,6 +1057,10 @@ describe('Picker.Basic', () => {
       });
     });
 
+    beforeEach(() => {
+      triggered = false;
+    });
+
     afterAll(() => {
       domMock.mockRestore();
     });
@@ -1083,6 +1080,46 @@ describe('Picker.Basic', () => {
       jest.useRealTimers();
       unmount();
     });
+
+    it('not repeat scroll if disabledTime return same value', () => {
+      const getDisabledTimeFn = () => () => ({
+        disabledHours: () => [10],
+        disabledMinutes: () => [10],
+        disabledSeconds: () => [10],
+      });
+
+      const { rerender } = render(
+        <DayPicker
+          picker="time"
+          defaultValue={getDay('2020-07-22 09:03:28')}
+          open
+          disabledTime={getDisabledTimeFn()}
+        />,
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+        jest.clearAllTimers();
+      });
+      expect(triggered).toBeTruthy();
+
+      // New disabledTime
+      triggered = false;
+      rerender(
+        <DayPicker
+          picker="time"
+          defaultValue={getDay('2020-07-22 09:03:28')}
+          open
+          disabledTime={getDisabledTimeFn()}
+        />,
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+        jest.clearAllTimers();
+      });
+      expect(triggered).toBeFalsy();
+    });
   });
 
   describe('prevent default on keydown', () => {