fix: dateTime mode switch should trigger onCalendarChange

src/RangePicker.tsx

@@ -275,6 +275,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  // ============================= Misc ==============================
  const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours));
 
+ const formatDateValue = (values: RangeValue<DateType>, index: 0 | 1) =>
+ values && values[index]
+ ? formatValue(values[index], { generateConfig, locale, format: formatList[0] })
+ : '';
+
  // Operation ref
  const operationRef: React.MutableRefObject<ContextOperationRefProps | null> =
  useRef<ContextOperationRefProps>(null);
@@ -328,6 +333,51 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  },
  });
 
+ // ========================= Convert Value =========================
+ function convertValue(newValue: RangeValue<DateType>, sourceIndex: 0 | 1) {
+ let values = newValue;
+ let startValue = getValue(values, 0);
+ let endValue = getValue(values, 1);
+
+ // >>>>> Format start & end values
+ if (startValue && endValue && generateConfig.isAfter(startValue, endValue)) {
+ if (
+ // WeekPicker only compare week
+ (picker === 'week' && !isSameWeek(generateConfig, locale.locale, startValue, endValue)) ||
+ // QuotaPicker only compare week
+ (picker === 'quarter' && !isSameQuarter(generateConfig, startValue, endValue)) ||
+ // Other non-TimePicker compare date
+ (picker !== 'week' &&
+ picker !== 'quarter' &&
+ picker !== 'time' &&
+ !isSameDate(generateConfig, startValue, endValue))
+ ) {
+ // Clean up end date when start date is after end date
+ if (sourceIndex === 0) {
+ values = [startValue, null];
+ endValue = null;
+ } else {
+ startValue = null;
+ values = [null, endValue];
+ }
+ } else if (picker !== 'time' || order !== false) {
+ // Reorder when in same date
+ values = reorderValues(values, generateConfig);
+ }
+ }
+
+ const startStr = formatDateValue(values, 0);
+ const endStr = formatDateValue(values, 1);
+
+ return {
+ values,
+ startValue,
+ endValue,
+ startStr,
+ endStr,
+ };
+ }
+
  // ============================= Modes =============================
  const [mergedModes, setInnerModes] = useMergedState<[PanelMode, PanelMode]>([picker, picker], {
  value: mode,
@@ -394,54 +444,25 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  }, 0);
  }
 
- function triggerChange(newValue: RangeValue<DateType>, sourceIndex: 0 | 1) {
- let values = newValue;
- let startValue = getValue(values, 0);
- let endValue = getValue(values, 1);
-
- // >>>>> Format start & end values
- if (startValue && endValue && generateConfig.isAfter(startValue, endValue)) {
- if (
- // WeekPicker only compare week
- (picker === 'week' && !isSameWeek(generateConfig, locale.locale, startValue, endValue)) ||
- // QuotaPicker only compare week
- (picker === 'quarter' && !isSameQuarter(generateConfig, startValue, endValue)) ||
- // Other non-TimePicker compare date
- (picker !== 'week' &&
- picker !== 'quarter' &&
- picker !== 'time' &&
- !isSameDate(generateConfig, startValue, endValue))
- ) {
- // Clean up end date when start date is after end date
- if (sourceIndex === 0) {
- values = [startValue, null];
- endValue = null;
- } else {
- startValue = null;
- values = [null, endValue];
- }
- } else if (picker !== 'time' || order !== false) {
- // Reorder when in same date
- values = reorderValues(values, generateConfig);
- }
- }
-
- setSelectedValue(values);
-
- const startStr =
- values && values[0]
- ? formatValue(values[0], { generateConfig, locale, format: formatList[0] })
- : '';
- const endStr =
- values && values[1]
- ? formatValue(values[1], { generateConfig, locale, format: formatList[0] })
- : '';
-
+ function onInternalCalendarChange(
+ values: RangeValue<DateType>,
+ startStr: string,
+ endStr: string,
+ sourceIndex: 0 | 1,
+ ) {
  if (onCalendarChange) {
  const info: RangeInfo = { range: sourceIndex === 0 ? 'start' : 'end' };
 
  onCalendarChange(values, [startStr, endStr], info);
  }
+ }
+
+ function triggerChange(newValue: RangeValue<DateType>, sourceIndex: 0 | 1) {
+ const { values, startValue, endValue, startStr, endStr } = convertValue(newValue, sourceIndex);
+
+ setSelectedValue(values);
+
+ onInternalCalendarChange(values, startStr, endStr, sourceIndex);
 
  // >>>>> Trigger `onChange` event
  const canStartValueTrigger = canValueTrigger(startValue, 0, mergedDisabled, allowEmpty);
@@ -463,6 +484,14 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  }
  }
 
+ function triggerCalendarChange(newValue: RangeValue<DateType>, sourceIndex: 0 | 1) {
+ const { values, startStr, endStr } = convertValue(newValue, sourceIndex);
+
+ setSelectedValue(values);
+
+ onInternalCalendarChange(values, startStr, endStr, sourceIndex);
+ }
+
  const forwardKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
  if (mergedOpen && operationRef.current && operationRef.current.onKeyDown) {
  // Let popup panel handle keyboard
@@ -566,10 +595,22 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  }, [mergedOpen]);
 
  const onInternalBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
- if (changeOnBlur && delayOpen) {
- const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex);
+ if ((changeOnBlur || needConfirmButton) && delayOpen) {
+ // As the date picker was manually switched,
+ // it's necessary to trigger the onCalendarChange event of the previous date picker.
+ const needTriggerIndex = needConfirmButton
+ ? mergedActivePickerIndex
+ ? 0
+ : 1
+ : mergedActivePickerIndex;
+ const selectedIndexValue = getValue(selectedValue, needTriggerIndex);
+
  if (selectedIndexValue) {
- triggerChange(selectedValue, mergedActivePickerIndex);
+ if (needConfirmButton) {
+ triggerCalendarChange(selectedValue, needTriggerIndex);
+ } else {
+ triggerChange(selectedValue, needTriggerIndex);
+ }
  }
  }
  return onBlur?.(e);
@@ -579,16 +620,17 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  blurToCancel: !changeOnBlur && needConfirmButton,
  forwardKeyDown,
  onBlur: onInternalBlur,
- isClickOutside: (target: EventTarget | null) =>
- !elementsContains(
+ isClickOutside: (target: EventTarget | null) => {
+ const elementsRefs = [startInputDivRef.current, endInputDivRef.current, containerRef.current];
+ return !elementsContains(
  [
+ // Filter the ref of the currently selected input to trigger the onBlur event of another input.
+ ...(needConfirmButton ? [elementsRefs[mergedActivePickerIndex]] : elementsRefs),
  panelDivRef.current,
- startInputDivRef.current,
- endInputDivRef.current,
- containerRef.current,
  ],
  target as HTMLElement,
- ),
+ );
+ },
  onFocus: (e: React.FocusEvent<HTMLInputElement>) => {
  if (onFocus) {
  onFocus(e);
@@ -633,7 +675,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  onKeyDown: (e, preventDefault) => {
  onKeyDown?.(e, preventDefault);
  },
- changeOnBlur,
  };
 
  const [startInputProps, { focused: startFocused, typing: startTyping }] = usePickerInput({

src/hooks/usePickerInput.ts

@@ -16,7 +16,6 @@ export default function usePickerInput({
  onCancel,
  onFocus,
  onBlur,
- changeOnBlur,
 }: {
  open: boolean;
  value: string;
@@ -29,7 +28,6 @@ export default function usePickerInput({
  onCancel: () => void;
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
- changeOnBlur?: boolean;
 }): [React.DOMAttributes<HTMLInputElement>, { focused: boolean; typing: boolean }] {
  const [typing, setTyping] = useState(false);
  const [focused, setFocused] = useState(false);
@@ -160,7 +158,7 @@ export default function usePickerInput({
  raf(() => {
  preventBlurRef.current = false;
  });
- } else if (!changeOnBlur && (!focused || clickedOutside)) {
+ } else if (!blurToCancel && (!focused || clickedOutside)) {
  triggerOpen(false);
  }
  }

tests/range.spec.tsx

@@ -3,9 +3,11 @@ import type { Moment } from 'moment';
 import moment from 'moment';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import type { PickerMode } from '../src/interface';
 import zhCN from '../src/locale/zh_CN';
+import type { RangePickerProps } from '../src/RangePicker';
 import {
  clearValue,
  clickButton,
@@ -19,8 +21,6 @@ import {
  openPicker,
  selectCell,
 } from './util/commonUtil';
-import type { RangePickerProps } from '../src/RangePicker';
-import { resetWarned } from 'rc-util/lib/warning';
 
 describe('Picker.Range', () => {
  let errorSpy;
@@ -286,7 +286,9 @@ describe('Picker.Range', () => {
  expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2);
  fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[1]);
  expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy();
- fireEvent.click(baseElement.querySelector('.rc-picker-cell-range-start .rc-picker-cell-inner'));
+ fireEvent.click(
+ baseElement.querySelector('.rc-picker-cell-range-start .rc-picker-cell-inner'),
+ );
  fireEvent.click(baseElement.querySelector('.rc-picker-ok button'));
  expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy();
  });
@@ -361,7 +363,6 @@ describe('Picker.Range', () => {
  });
 
  function testRangePickerPresetRange(propsType: 'ranges' | 'presets') {
-
  const genProps = (ranges: Record<string, any>) => {
  const props: Partial<RangePickerProps<Moment>> = {};
  if (propsType === 'ranges') {
@@ -371,21 +372,19 @@ describe('Picker.Range', () => {
  props.presets = [];
  Object.entries(ranges).forEach(([label, value]) => {
  props.presets.push({ label, value });
- })
+ });
  }
  return props as RangePickerProps<Moment>;
- }
+ };
 
  it(`${propsType} work`, () => {
  const onChange = jest.fn();
  const { container } = render(
  <MomentRangePicker
- {...genProps(
- {
- test: [getMoment('1989-11-28'), getMoment('1990-09-03')],
- func: () => [getMoment('2000-01-01'), getMoment('2010-11-11')],
- }
- )}
+ {...genProps({
+ test: [getMoment('1989-11-28'), getMoment('1990-09-03')],
+ func: () => [getMoment('2000-01-01'), getMoment('2010-11-11')],
+ })}
  onChange={onChange}
  />,
  );
@@ -420,11 +419,9 @@ describe('Picker.Range', () => {
  it(`${propsType} hover className`, () => {
  const { container } = render(
  <MomentRangePicker
- {...genProps(
- {
- now: [getMoment('1990-09-11'), getMoment('1990-09-13')],
- }
- )}
+ {...genProps({
+ now: [getMoment('1990-09-11'), getMoment('1990-09-13')],
+ })}
  />,
  );
 
@@ -439,7 +436,6 @@ describe('Picker.Range', () => {
  expect(findCell(12)).not.toHaveClass('rc-picker-cell-in-range');
  expect(findCell(13)).not.toHaveClass('rc-picker-cell-range-end');
  });
-
  }
 
  describe('ranges or presets', () => {
@@ -755,7 +751,7 @@ describe('Picker.Range', () => {
 
  expect(container).toMatchSnapshot();
  expect(errorSpy).toHaveBeenCalledWith(
- 'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.'
+ 'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.',
  );
  });
 
@@ -1111,19 +1107,19 @@ describe('Picker.Range', () => {
  targetCell: string;
  match: string[];
  }[] = [
-  {
-  picker: 'week',
-  defaultValue: ['2020-06-13'],
-  targetCell: '9',
-  match: ['2020-24th'],
-  },
-  {
-  picker: 'quarter',
-  defaultValue: ['2020-03-30', '2020-05-20'],
-  targetCell: 'Q1',
-  match: ['2020-Q1'],
-  },
-  ];
+ {
+ picker: 'week',
+ defaultValue: ['2020-06-13'],
+ targetCell: '9',
+ match: ['2020-24th'],
+ },
+ {
+ picker: 'quarter',
+ defaultValue: ['2020-03-30', '2020-05-20'],
+ targetCell: 'Q1',
+ match: ['2020-Q1'],
+ },
+ ];
 
  list.forEach(({ picker, defaultValue, match, targetCell }) => {
  it(picker, () => {
@@ -1927,4 +1923,25 @@ describe('Picker.Range', () => {
  fireEvent.click(document.querySelector('.rc-picker-cell'));
  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}
+ />,
+ );
+
+ openPicker(container, 0);
+
+ selectCell(8, 0);
+
+ openPicker(container, 1);
+
+ // onBlur is triggered when the switch is complete
+ closePicker(container, 0);
+
+ expect(onCalendarChange).toHaveBeenCalled();
+ });
 });