fix: blur to trigger change (#838)

* fix: not trigger change if click on the panel * test: add test case
react-component · Jul 3, 2024 · 6485b33 · 6485b33
1 parent bf95656
commit 6485b33
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
@@ -45,6 +45,8 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   needConfirm: boolean;
   isInvalid: (date: DateType | DateType[]) => boolean;
   onOk: VoidFunction;
+
+  onPanelMouseDown?: React.MouseEventHandler<HTMLDivElement>;
 }
 
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>) {
@@ -68,6 +70,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     // Focus
     onFocus,
     onBlur,
+    onPanelMouseDown,
 
     // Direction
     direction,
@@ -187,6 +190,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   // Container
   let renderNode = (
     <div
+      onMouseDown={onPanelMouseDown}
       tabIndex={-1}
       className={classNames(
         containerPrefixCls,
@@ -213,6 +217,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     const offsetUnit = getoffsetUnit(realPlacement, rtl);
     renderNode = (
       <div
+        onMouseDown={onPanelMouseDown}
         ref={wrapperRef}
         className={classNames(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
       >

diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx
@@ -500,10 +500,13 @@ function RangePicker<DateType extends object = any>(
     onSharedFocus(event);
   };
 
-  // >>> Calendar
-  const onPanelSelect: PickerPanelProps<DateType>['onChange'] = (date: DateType) => {
+  // >>> MouseDown
+  const onPanelMouseDown: React.MouseEventHandler<HTMLDivElement> = () => {
     lastOperation('panel');
+  };
 
+  // >>> Calendar
+  const onPanelSelect: PickerPanelProps<DateType>['onChange'] = (date: DateType) => {
     const clone: RangeValueType<DateType> = fillIndex(calendarValue, activeIndex, date);
 
     // Only trigger calendar event but not update internal `calendarValue` state
@@ -571,6 +574,7 @@ function RangePicker<DateType extends object = any>(
       // Focus
       onFocus={onPanelFocus}
       onBlur={onSharedBlur}
+      onPanelMouseDown={onPanelMouseDown}
       // Mode
       picker={picker}
       mode={mergedMode}
@@ -641,7 +645,7 @@ function RangePicker<DateType extends object = any>(
 
   const onSelectorBlur: SelectorProps['onBlur'] = (event, index) => {
     triggerOpen(false);
-    if (!needConfirm) {
+    if (!needConfirm && lastOperation() === 'input') {
       const nextIndex = nextActiveIndex(calendarValue);
       flushSubmit(activeIndex, nextIndex === null);
     }

diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx
@@ -676,9 +676,9 @@ describe('NewPicker.Range', () => {
 
       // Change start time (manually focus since fireEvent.focus not change activeElement)
       openPicker(container);
-      fireEvent.click(
-        document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[6],
-      );
+      const li6 = document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[6];
+      fireEvent.mouseDown(li6);
+      fireEvent.click(li6);
       document.querySelector<HTMLDivElement>('.rc-picker-panel-container').focus();
 
       act(() => {
@@ -696,9 +696,11 @@ describe('NewPicker.Range', () => {
       expect(isOpen()).toBeTruthy();
 
       // Select end time
-      fireEvent.click(
-        document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[11],
-      );
+      const li11 = document
+        .querySelector('.rc-picker-time-panel-column')
+        .querySelectorAll('li')[11];
+      fireEvent.mouseDown(li11);
+      fireEvent.click(li11);
 
       act(() => {
         jest.runAllTimers();