fix: Adjust blur to openChange logic

Author: zombieJ

examples/uncontrolled.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Moment } from 'moment';
-import Picker from '../src/Picker';
 import momentGenerateConfig from '../src/generate/moment';
 import zhCN from '../src/locale/zh_CN';
 import '../assets/index.less';
+import Picker, { RangePicker } from '../src';
 
 export default () => (
   <div>
@@ -28,6 +28,16 @@ export default () => (
           console.log('2 =>', open);
         }}
       />
+      <RangePicker<Moment>
+        generateConfig={momentGenerateConfig}
+        locale={zhCN}
+        picker="week"
+        allowClear
+        open
+        onOpenChange={open => {
+          console.log('3 =>', open);
+        }}
+      />
       <button type="button">233</button>
     </div>
   </div>

src/Picker.tsx

@@ -274,8 +274,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
         panelDivRef.current &&
         !panelDivRef.current.contains(target as Node) &&
         inputDivRef.current &&
-        !inputDivRef.current.contains(target as Node) &&
-        onOpenChange
+        !inputDivRef.current.contains(target as Node)
       ),
     onSubmit: () => {
       triggerChange(selectedValue);

src/RangePicker.tsx

@@ -397,8 +397,13 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   const triggerChange = (
     newValue: RangeValue<DateType>,
-    forceInput: boolean = true,
+    config: {
+      source?: 'open';
+      forceInput?: boolean;
+    } = {},
   ) => {
+    const { forceInput = true, source } = config;
+
     let values = newValue;
     const startValue = getValue(values, 0);
     let endValue = getValue(values, 1);
@@ -438,7 +443,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     if (canTrigger) {
       // Trigger onChange only when value is validate
       setInnerValue(values);
-      triggerOpen(false, activePickerIndex, true);
+      if (source !== 'open') {
+        triggerOpen(false, activePickerIndex, true);
+      }
 
       if (
         onChange &&
@@ -456,7 +463,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         return;
       }
 
-      triggerOpen(true, missingValueIndex);
+      if (source !== 'open') {
+        triggerOpen(true, missingValueIndex);
+      }
 
       // Delay to focus to avoid input blur trigger expired selectedValues
       setTimeout(() => {
@@ -479,7 +488,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     } else if (activePickerIndex === index) {
       triggerInnerOpen(newOpen);
       if (!preventChangeEvent) {
-        triggerChange(selectedValue);
+        triggerChange(selectedValue, { source: 'open' });
       }
     }
   };
@@ -550,20 +559,18 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   });
 
   // ============================= Input =============================
-  const getSharedInputHookProps = (
-    index: 0 | 1,
-    inputDivRef: React.RefObject<HTMLDivElement>,
-    resetText: () => void,
-  ) => ({
+  const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({
     blurToCancel: !!(picker === 'date' && showTime),
     forwardKeyDown,
     onBlur,
     isClickOutside: (target: EventTarget | null) =>
       !!(
         panelDivRef.current &&
         !panelDivRef.current.contains(target as Node) &&
-        inputDivRef.current &&
-        !inputDivRef.current.contains(target as Node)
+        startInputDivRef.current &&
+        !startInputDivRef.current.contains(target as Node) &&
+        endInputDivRef.current &&
+        !endInputDivRef.current.contains(target as Node)
       ),
     onFocus: (e: React.FocusEvent<HTMLInputElement>) => {
       setActivePickerIndex(index);
@@ -587,15 +594,15 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     startInputProps,
     { focused: startFocused, typing: startTyping },
   ] = usePickerInput({
-    ...getSharedInputHookProps(0, startInputDivRef, resetStartText),
+    ...getSharedInputHookProps(0, resetStartText),
     open: startOpen,
   });
 
   const [
     endInputProps,
     { focused: endFocused, typing: endTyping },
   ] = usePickerInput({
-    ...getSharedInputHookProps(1, endInputDivRef, resetEndText),
+    ...getSharedInputHookProps(1, resetEndText),
     open: endOpen,
   });
 
@@ -930,7 +937,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
             values = updateValues(values, null, 1);
           }
 
-          triggerChange(values, false);
+          triggerChange(values, { forceInput: false });
         }}
         className={`${prefixCls}-clear`}
       >

src/hooks/usePickerInput.ts

@@ -95,7 +95,11 @@ export default function usePickerInput({
         return;
       }
 
-      triggerOpen(false);
+      if (blurToCancel) {
+        onCancel();
+      } else {
+        triggerOpen(false);
+      }
       setFocused(false);
 
       if (onBlur) {
@@ -107,19 +111,17 @@ export default function usePickerInput({
   // Global click handler
   React.useEffect(() =>
     addGlobalMouseDownEvent(({ target }: MouseEvent) => {
-      if (open && isClickOutside(target)) {
-        preventBlurRef.current = true;
+      if (open) {
+        if (!isClickOutside(target)) {
+          preventBlurRef.current = true;
 
-        if (blurToCancel) {
-          onCancel();
-        } else {
+          // Always set back in case `onBlur` prevented by user
+          window.setTimeout(() => {
+            preventBlurRef.current = false;
+          }, 0);
+        } else if (!focused) {
           triggerOpen(false);
         }
-
-        // Always set back in case `onBlur` prevented by user
-        window.setTimeout(() => {
-          preventBlurRef.current = false;
-        }, 0);
       }
     }),
   );

tests/picker.spec.tsx

@@ -113,7 +113,7 @@ describe('Picker.Basic', () => {
     it('fixed open need repeat trigger onOpenChange', () => {
       jest.useFakeTimers();
       const onOpenChange = jest.fn();
-      const wrapper = mount(<MomentPicker onOpenChange={onOpenChange} open />);
+      mount(<MomentPicker onOpenChange={onOpenChange} open />);
 
       for (let i = 0; i < 10; i += 1) {
         const clickEvent = new Event('mousedown');
@@ -122,7 +122,6 @@ describe('Picker.Basic', () => {
         });
         act(() => {
           window.dispatchEvent(clickEvent);
-          wrapper.find('input').simulate('blur');
         });
         expect(onOpenChange).toHaveBeenCalledTimes(i + 1);
       }

tests/range.spec.tsx

@@ -478,11 +478,8 @@ describe('Picker.Range', () => {
 
       wrapper.openPicker();
       wrapper.selectCell(13);
-      wrapper.closePicker();
-
-      wrapper.openPicker(1);
+      wrapper.find('.rc-picker-ok button').simulate('click');
       wrapper.selectCell(23);
-      wrapper.closePicker(1);
 
       matchValues(wrapper, '1990-09-13 01:02:03', '1990-09-23 05:06:07');
     });
@@ -802,16 +799,8 @@ describe('Picker.Range', () => {
     const wrapper = mount(<MomentRangePicker showTime />);
     wrapper.openPicker();
     wrapper.selectCell(11);
+    wrapper.closePicker();
 
-    const clickEvent = new Event('mousedown');
-    Object.defineProperty(clickEvent, 'target', {
-      get: () => document.body,
-    });
-    act(() => {
-      window.dispatchEvent(clickEvent);
-    });
-
-    wrapper.update();
     expect(wrapper.isOpen()).toBeFalsy();
     expect(
       wrapper