fix:Field switch should be locked even when the field already has values in RangePicker with showTime enabled (#897)

* rangPicker禁用时 不在对禁用的日期进行校验

* 测试用例编写

* 测试用例

* fix: After the RangePicker  sets disabledDate, the date cannot be modified.

* Add test case

* fix: returns right dates onChange when manually change date time without pressing OK button

* fix:returns wrong dates onChange when manually change date time without pressing OK button

* fix:returns wrong dates onChange when manually change date time without pressing OK button

* fix:modify test cases

* fix:adjust hasSubmitValue check for submitIndexRef

* fix:add hasActiveSubmitValue check for submitIndexRef

* fix:delete hasSubmitValue check

Author: Zyf665

src/PickerInput/RangePicker.tsx

@@ -260,6 +260,8 @@ function RangePicker<DateType extends object = any>(
     setActiveIndex,
     nextActiveIndex,
     activeIndexList,
+    updateSubmitIndex,
+    hasActiveSubmitValue,
   ] = useRangeActive(disabled, allowEmpty, mergedOpen);
 
   const onSharedFocus = (event: React.FocusEvent<HTMLElement>, index?: number) => {
@@ -325,8 +327,6 @@ function RangePicker<DateType extends object = any>(
     flushSubmit,
     /** Trigger `onChange` directly without check `disabledDate` */
     triggerSubmitChange,
-    /** Tell `index` has filled value in it */
-    hasSubmitValue,
   ] = useRangeValue<RangeValueType<DateType>, DateType>(
     filledProps,
     mergedValue,
@@ -413,7 +413,7 @@ function RangePicker<DateType extends object = any>(
     if (date) {
       nextValue = fillCalendarValue(date, activeIndex);
     }
-
+    updateSubmitIndex(activeIndex);
     // Get next focus index
     const nextIndex = nextActiveIndex(nextValue);
 
@@ -641,7 +641,7 @@ function RangePicker<DateType extends object = any>(
       needConfirm &&
       // Not change index if is not filled
       !allowEmpty[lastActiveIndex] &&
-      !hasSubmitValue(lastActiveIndex) &&
+      !hasActiveSubmitValue(lastActiveIndex) &&
       calendarValue[lastActiveIndex]
     ) {
       selectorRef.current.focus({ index: lastActiveIndex });

src/PickerInput/hooks/useRangeActive.ts

@@ -23,14 +23,24 @@ export default function useRangeActive<DateType>(
   setActiveIndex: (index: number) => void,
   nextActiveIndex: NextActive<DateType>,
   activeList: number[],
+  updateSubmitIndex: (index: number | null) => void,
+  hasActiveSubmitValue: (index: number) => boolean,
 ] {
   const [activeIndex, setActiveIndex] = React.useState(0);
   const [focused, setFocused] = React.useState<boolean>(false);
 
   const activeListRef = React.useRef<number[]>([]);
-
+  const submitIndexRef = React.useRef<number | null>(null);
   const lastOperationRef = React.useRef<OperationType>(null);
 
+  const updateSubmitIndex = (index: number | null) => {
+    submitIndexRef.current = index;
+  };
+
+  const hasActiveSubmitValue = (index: number) => {
+    return submitIndexRef.current === index;
+  };
+
   const triggerFocus = (nextFocus: boolean) => {
     setFocused(nextFocus);
   };
@@ -62,6 +72,7 @@ export default function useRangeActive<DateType>(
   useLockEffect(focused || mergedOpen, () => {
     if (!focused) {
       activeListRef.current = [];
+      updateSubmitIndex(null);
     }
   });
 
@@ -79,5 +90,7 @@ export default function useRangeActive<DateType>(
     setActiveIndex,
     nextActiveIndex,
     activeListRef.current,
+    updateSubmitIndex,
+    hasActiveSubmitValue,
   ];
 }

src/PickerInput/hooks/useRangeValue.ts

@@ -142,7 +142,6 @@ export function useInnerValue<ValueType extends DateType[], DateType extends obj
 
       // Update merged value
       const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone);
-
       if (!isSameMergedDates) {
         setCalendarValue(clone);
 
@@ -186,8 +185,6 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
   flushSubmit: (index: number, needTriggerChange: boolean) => void,
   /** Trigger `onChange` directly without check `disabledDate` */
   triggerSubmitChange: (value: ValueType) => boolean,
-  /** Tell `index` has filled value in it */
-  hasSubmitValue: (index: number) => boolean,
 ] {
   const {
     // MISC
@@ -333,11 +330,6 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
     2,
   );
 
-  // ============================ Check =============================
-  function hasSubmitValue(index: number) {
-    return !!submitValue()[index];
-  }
-
   // ============================ Return ============================
-  return [flushSubmit, triggerSubmit, hasSubmitValue];
+  return [flushSubmit, triggerSubmit];
 }

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('.rc-picker-ok button'));
+
+      selectCell(16);
+      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'));
+      openPicker(container, 1);
+      expect(container.querySelectorAll('input')[1]).toHaveFocus();
+      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();