fix: resolves an issue that occurs when showTime and changeOnBlur exi…

…st 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]>

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();
+ });
  });
 });