fix: resolves an issue that occurs when showTime and changeOnBlur exist at the same time (#676)

* fix: Increase the priority of executing events in dateTime mode

* chore: add test case

---------

Co-authored-by: dujiaqi <[email protected]>

Author: Yuiai01

src/Picker.tsx

@@ -325,6 +325,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   const [inputProps, { focused, typing }] = usePickerInput({
     blurToCancel: needConfirmButton,
+    changeOnBlur,
     open: mergedOpen,
     value: text,
     triggerOpen,

src/RangePicker.tsx

@@ -573,13 +573,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   const onInternalBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     if (delayOpen) {
-      if (changeOnBlur) {
-        const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex);
-
-        if (selectedIndexValue) {
-          triggerChange(selectedValue, mergedActivePickerIndex);
-        }
-      } else if (needConfirmButton) {
+      if (needConfirmButton) {
         // when in dateTime mode, switching between two date input fields will trigger onCalendarChange.
         // when onBlur is triggered, the input field has already switched, 
         // so it's necessary to obtain the value of the previous input field here.
@@ -589,6 +583,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         if (selectedIndexValue) {
           triggerChange(selectedValue, needTriggerIndex, true);
         }
+      } else if (changeOnBlur) {
+        const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex);
+
+        if (selectedIndexValue) {
+          triggerChange(selectedValue, mergedActivePickerIndex);
+        }
       }
     }
 
@@ -597,6 +597,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({
     blurToCancel: !changeOnBlur && needConfirmButton,
+    changeOnBlur,
     forwardKeyDown,
     onBlur: onInternalBlur,
     isClickOutside: (target: EventTarget | null) => {

src/hooks/usePickerInput.ts

@@ -12,6 +12,7 @@ export default function usePickerInput({
   forwardKeyDown,
   onKeyDown,
   blurToCancel,
+  changeOnBlur,
   onSubmit,
   onCancel,
   onFocus,
@@ -24,6 +25,7 @@ export default function usePickerInput({
   forwardKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => boolean;
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, preventDefault: () => void) => void;
   blurToCancel?: boolean;
+  changeOnBlur?: boolean
   onSubmit: () => void | boolean;
   onCancel: () => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
@@ -158,7 +160,7 @@ export default function usePickerInput({
           raf(() => {
             preventBlurRef.current = false;
           });
-        } else if (!blurToCancel && (!focused || clickedOutside)) {
+        } else if (!changeOnBlur && !blurToCancel && (!focused || clickedOutside)) {
           triggerOpen(false);
         }
       }

tests/range.spec.tsx

@@ -1924,24 +1924,48 @@ describe('Picker.Range', () => {
     expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active');
   });
 
-  it('dateTime mode switch should trigger onCalendarChange', () => {
-    const onCalendarChange = jest.fn();
-    const { container } = render(
-      <MomentRangePicker
-        showTime
-        onCalendarChange={onCalendarChange}
-      />,
-    );
+  describe('trigger onCalendarChange', () => {
+    const switchInput = (container: HTMLElement) => {
+      openPicker(container, 0);
 
-    openPicker(container, 0);
+      selectCell(8, 0);
 
-    selectCell(8, 0);
+      openPicker(container, 1);
 
-    openPicker(container, 1);
+      // onBlur is triggered when the switch is complete
+      closePicker(container, 0);
+    };
+
+    it('dateTime mode switch should trigger onCalendarChange', () => {
+      const onCalendarChange = jest.fn();
+      const { container } = render(
+        <MomentRangePicker showTime onCalendarChange={onCalendarChange} />,
+      );
+
+      switchInput(container);
 
-    // onBlur is triggered when the switch is complete
-    closePicker(container, 0);
+      expect(onCalendarChange).toHaveBeenCalled();
+    });
 
-    expect(onCalendarChange).toHaveBeenCalled();
+    it('should only trigger onCalendarChange when showTime and changeOnBlur exist', () => {
+      const onCalendarChange = jest.fn();
+      const onChange = jest.fn();
+      const { container, baseElement } = render(
+        <MomentRangePicker
+          showTime
+          changeOnBlur
+          onChange={onChange}
+          onCalendarChange={onCalendarChange}
+        />,
+      );
+
+      switchInput(container);
+
+      // one of the panel should be open
+      expect(baseElement.querySelector('.rc-picker-dropdown')).toBeTruthy();
+
+      expect(onCalendarChange).toHaveBeenCalled();
+      expect(onChange).not.toHaveBeenCalled();
+    });
   });
 });