chore: changeOnBlur should not trigger when not open (#631)

* fix: closed panel should not trigger change on blur

* test: add ts test case

Author: zombieJ

src/RangePicker.tsx

@@ -558,7 +558,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   // ============================= Input =============================
   const onInternalBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    if (changeOnBlur) {
+    if (changeOnBlur && mergedOpen) {
       const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex);
       if (selectedIndexValue) {
         triggerChange(selectedValue, mergedActivePickerIndex);

src/hooks/useRangeOpen.ts

@@ -40,12 +40,6 @@ export default function useRangeOpen(
   firstTimeOpen: boolean,
   triggerOpen: (open: boolean, activeIndex: 0 | 1 | false, source: SourceType) => void,
 ] {
-  // We record opened status here in case repeat open with picker
-  // const [openRecord, setOpenRecord] = React.useState<{
-  //   0?: boolean;
-  //   1?: boolean;
-  // }>({});
-
   const [firstTimeOpen, setFirstTimeOpen] = React.useState(false);
 
   const [mergedOpen, setMergedOpen] = useMergedState(defaultOpen || false, {
@@ -62,8 +56,6 @@ export default function useRangeOpen(
   const [nextActiveIndex, setNextActiveIndex] = React.useState<0 | 1>(null);
 
   const triggerOpen = useEvent((nextOpen: boolean, index: 0 | 1 | false, source: SourceType) => {
-    // console.error('✅', nextOpen, index, source, startSelectedValue, endSelectedValue);
-
     if (index === false) {
       // Only when `nextOpen` is false and no need open to next index
       setMergedOpen(nextOpen);
@@ -79,32 +71,16 @@ export default function useRangeOpen(
         // Also set next index if next is empty
         ![startSelectedValue, endSelectedValue][nextIndex]
       ) {
-        // Reset open record
-        // setOpenRecord({
-        //   [index]: true,
-        // });
         setFirstTimeOpen(true);
         setNextActiveIndex(nextIndex);
       } else {
-        // setOpenRecord((ori) => ({
-        //   ...ori,
-        //   [index]: true,
-        // }));
         setFirstTimeOpen(false);
 
         if (nextActiveIndex !== null) {
           setNextActiveIndex(null);
         }
       }
     } else if (source === 'confirm' || (source === 'blur' && changeOnBlur)) {
-      // Close if current value is empty
-      // const selectedValue = [startSelectedValue, endSelectedValue][index];
-
-      // if (!selectedValue) {
-      //   setMergedOpen(false);
-      //   return;
-      // }
-
       if (nextActiveIndex !== null) {
         setFirstTimeOpen(false);
         setMergedActivePickerIndex(nextActiveIndex);

tests/blur.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { getMoment, MomentPicker, MomentRangePicker } from './util/commonUtil';
+import { getMoment, isOpen, MomentPicker, MomentRangePicker, openPicker } from './util/commonUtil';
 
 describe('Picker.ChangeOnBlur', () => {
   beforeEach(() => {
@@ -36,7 +36,7 @@ describe('Picker.ChangeOnBlur', () => {
     expect(onChange).toHaveBeenCalled();
   });
 
-  it.only('RangePicker', () => {
+  it('RangePicker', () => {
     const onChange = jest.fn();
 
     const { container } = render(
@@ -67,4 +67,28 @@ describe('Picker.ChangeOnBlur', () => {
     fireEvent.blur(container.querySelectorAll('input')[1]);
     expect(onChange).toHaveBeenCalled();
   });
+
+  it('blur & close should not trigger change', () => {
+    const onCalendarChange = jest.fn();
+
+    const { container } = render(
+      <>
+        <MomentRangePicker
+          changeOnBlur
+          defaultValue={[getMoment('2000-01-01'), getMoment('2000-01-05')]}
+          onCalendarChange={onCalendarChange}
+        />
+      </>,
+    );
+
+    expect(isOpen()).toBeFalsy();
+    fireEvent.blur(container.querySelector('input'));
+    expect(onCalendarChange).not.toHaveBeenCalled();
+
+    // Open to trigger
+    openPicker(container);
+    expect(isOpen()).toBeTruthy();
+    fireEvent.blur(container.querySelector('input'));
+    expect(onCalendarChange).toHaveBeenCalled();
+  });
 });