fix:returns wrong dates onChange when manually change date time witho…

…ut pressing OK button
react-component · Nov 26, 2024 · bc2c3a1 · bc2c3a1
1 parent 1ed4d1c
commit bc2c3a1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 36 deletions.
diff --git a/src/PickerInput/hooks/useRangeValue.ts b/src/PickerInput/hooks/useRangeValue.ts
@@ -4,7 +4,7 @@ import type { GenerateConfig } from '../../generate';
 import useSyncState from '../../hooks/useSyncState';
 import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../interface';
 import { formatValue, isSame, isSameTimestamp } from '../../utils/dateUtil';
-import { fillRangeValues } from '../../utils/miscUtil';
+import { fillIndex } from '../../utils/miscUtil';
 import type { RangePickerProps } from '../RangePicker';
 import type { ReplacedPickerProps } from '../SinglePicker';
 import useLockEffect from './useLockEffect';
@@ -301,11 +301,8 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
   });
 
   // ========================= Flush Submit =========================
-  const flushSubmit = useEvent((_: number, needTriggerChange: boolean) => {
-    const start = getCalendarValue()[0];
-    const end = getCalendarValue()[1];
-
-    const nextSubmitValue = fillRangeValues(submitValue(), start, end);
+  const flushSubmit = useEvent((index: number, needTriggerChange: boolean) => {
+    const nextSubmitValue = fillIndex(submitValue(), index, getCalendarValue()[index]);
     setSubmitValue(nextSubmitValue);
 
     if (needTriggerChange) {
@@ -337,7 +334,10 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
 
   // ============================ Check =============================
   function hasSubmitValue(index: number) {
-    return !!submitValue()[index];
+    return (
+      !!submitValue()[index] &&
+      isSame(generateConfig, locale, submitValue()[index], getCalendarValue()[index], picker)
+    );
   }
 
   // ============================ Return ============================

diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx
@@ -716,6 +716,40 @@ describe('NewPicker.Range', () => {
       expect(onChange).toHaveBeenCalledWith(expect.anything(), ['06:00:00', '11:00:00']);
     });
 
+    it('Field switch should be locked even when the field already has the values', () => {
+      const onChange = jest.fn();
+
+      const { container } = render(<DayRangePicker onChange={onChange} showTime />);
+      openPicker(container);
+      selectCell(15);
+      fireEvent.click(document.querySelector('ul').querySelector('li'));
+      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+
+      selectCell(16);
+      fireEvent.click(document.querySelector('ul').querySelector('li'));
+      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+
+      expect(onChange).toHaveBeenCalledWith(expect.anything(), [
+        '1990-09-15 00:00:00',
+        '1990-09-16 00:00:00',
+      ]);
+
+      onChange.mockReset();
+      openPicker(container, 0);
+      selectCell(1);
+      openPicker(container, 1);
+      expect(container.querySelectorAll('input')[0]).toHaveFocus();
+      expect(container.querySelectorAll('input')[1]).not.toHaveFocus();
+
+      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      selectCell(2);
+      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      expect(onChange).toHaveBeenCalledWith(expect.anything(), [
+        '1990-09-01 00:00:00',
+        '1990-09-02 00:00:00',
+      ]);
+    });
+
     it('double click to confirm if needConfirm', () => {
       const onChange = jest.fn();
 

diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
@@ -1017,35 +1017,6 @@ describe('Picker.Range', () => {
     expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy();
   });
 
-  it('returns right dates onChange when manually change date time without pressing OK button', () => {
-    const onChange = jest.fn();
-
-    const { container } = render(<DayRangePicker onChange={onChange} showTime />);
-    openPicker(container);
-    selectCell(15);
-    fireEvent.click(document.querySelector('ul').querySelector('li'));
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
-
-    selectCell(16);
-    fireEvent.click(document.querySelector('ul').querySelector('li'));
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
-
-    expect(onChange).toHaveBeenCalledWith(expect.anything(), [
-      '1990-09-15 00:00:00',
-      '1990-09-16 00:00:00',
-    ]);
-
-    onChange.mockReset();
-    openPicker(container, 0);
-    selectCell(1);
-    openPicker(container, 1);
-    selectCell(2);
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
-    expect(onChange).toHaveBeenCalledWith(expect.anything(), [
-      '1990-09-01 00:00:00',
-      '1990-09-02 00:00:00',
-    ]);
-  });
   describe('reorder onChange logic', () => {
     it('datetime should reorder in onChange if start is after end in same date', () => {
       const onChange = jest.fn();