fix: should not trigger blur event while picker's input focused (#510)

Co-authored-by: tangwenhui <[email protected]>

Author: kiner-tang

docs/examples/range.tsx

@@ -62,6 +62,9 @@ export default () => {
             defaultValue={[moment('1990-09-03'), moment('1989-11-28')]}
             clearIcon={<span>X</span>}
             suffixIcon={<span>O</span>}
+            onBlur={() => {
+              console.log('trigger blur')
+            }}
           />
           <RangePicker<Moment>
             {...sharedProps}

src/RangePicker.tsx

@@ -635,10 +635,13 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     },
   });
 
+  const currentFocusedKey = useRef<string>('');
   const [startInputProps, { focused: startFocused, typing: startTyping }] = usePickerInput({
     ...getSharedInputHookProps(0, resetStartText),
     open: startOpen,
     value: startText,
+    currentFocusedKey,
+    key: 'start',
     onKeyDown: (e, preventDefault) => {
       onKeyDown?.(e, preventDefault);
     },
@@ -648,6 +651,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     ...getSharedInputHookProps(1, resetEndText),
     open: endOpen,
     value: endText,
+    currentFocusedKey,
+    key: 'end',
     onKeyDown: (e, preventDefault) => {
       onKeyDown?.(e, preventDefault);
     },

src/hooks/usePickerInput.ts

@@ -15,6 +15,8 @@ export default function usePickerInput({
   onCancel,
   onFocus,
   onBlur,
+  currentFocusedKey,
+  key = 'start',
 }: {
   open: boolean;
   value: string;
@@ -27,9 +29,12 @@ export default function usePickerInput({
   onCancel: () => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  currentFocusedKey?: React.MutableRefObject<string>;
+  key: string;
 }): [React.DOMAttributes<HTMLInputElement>, { focused: boolean; typing: boolean }] {
   const [typing, setTyping] = useState(false);
   const [focused, setFocused] = useState(false);
+  const delayBlurTimer = useRef<NodeJS.Timeout>();
 
   /**
    * We will prevent blur to handle open event when user click outside,
@@ -99,6 +104,8 @@ export default function usePickerInput({
       setTyping(true);
       setFocused(true);
 
+      currentFocusedKey.current = key;
+      clearTimeout(delayBlurTimer.current);
       if (onFocus) {
         onFocus(e);
       }
@@ -130,9 +137,15 @@ export default function usePickerInput({
       }
       setFocused(false);
 
-      if (onBlur) {
-        onBlur(e);
-      }
+      currentFocusedKey.current = '';
+      // Delay to prevent 'range' focus transitions from firing resulting in incorrect out-of-focus events
+      delayBlurTimer.current = setTimeout(() => {
+        // Prevent the 'blur' event from firing when there is currently a focused input
+        if (currentFocusedKey.current) return;
+        if (onBlur) {
+          onBlur(e);
+        }
+      }, 100);
     },
   };
 
@@ -167,5 +180,7 @@ export default function usePickerInput({
     }),
   );
 
+  useEffect(() => () => clearTimeout(delayBlurTimer.current), []);
+
   return [inputProps, { focused, typing }];
 }

tests/range.spec.tsx

@@ -1127,6 +1127,35 @@ describe('Picker.Range', () => {
         expect(wrapper.isOpen()).toBeFalsy();
       });
 
+      it('blur in range', (done) => {
+        const ref = React.createRef<MomentRangePicker>();
+        const blurFn = jest.fn();
+        const wrapper = mount(
+          <MomentRangePicker
+            ref={ref}
+            defaultValue={[getMoment('1989-01-01'), getMoment('1990-01-01')]}
+            onBlur={blurFn}
+          />,
+        );
+
+        wrapper.openPicker(0);
+        wrapper.inputValue('1990-11-28');
+        wrapper.closePicker(0);
+        expect(wrapper.isOpen()).toBeTruthy();
+        expect(blurFn).not.toHaveBeenCalled();
+
+        wrapper.inputValue('1990-12-23');
+        wrapper.closePicker(1);
+        expect(wrapper.isOpen()).toBeFalsy();
+        expect(blurFn).not.toHaveBeenCalled();
+
+        ref.current!.rangePickerRef.current!.blur();
+        setTimeout(() => {
+          expect(blurFn).toHaveBeenCalled();
+          done();
+        }, 120);
+      });
+
       it('new start is after end', () => {
         const wrapper = mount(
           <MomentRangePicker defaultValue={[getMoment('1989-01-10'), getMoment('1989-01-15')]} />,