fix: prevent picker blur when still in focus (#612)

Author: luo3house

src/hooks/usePickerInput.ts

@@ -1,6 +1,6 @@
-import type * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
+import type * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { addGlobalMouseDownEvent, getTargetFromEvent } from '../utils/uiUtil';
 
 export default function usePickerInput({
@@ -149,10 +149,9 @@ export default function usePickerInput({
   useEffect(() =>
     addGlobalMouseDownEvent((e: MouseEvent) => {
       const target = getTargetFromEvent(e);
+      const clickedOutside = isClickOutside(target);
 
       if (open) {
-        const clickedOutside = isClickOutside(target);
-
         if (!clickedOutside) {
           preventBlurRef.current = true;
 
@@ -163,6 +162,8 @@ export default function usePickerInput({
         } else if (!focused || clickedOutside) {
           triggerOpen(false);
         }
+      } else if (focused && !clickedOutside) {
+        preventBlurRef.current = true;
       }
     }),
   );

tests/picker.spec.tsx

@@ -341,6 +341,21 @@ describe('Picker.Basic', () => {
     expect(mouseDownEvent.defaultPrevented).toBeTruthy();
   });
 
+  it('not fire blur when clickinside and is in focus ', () => {
+    const onBlur = jest.fn();
+    const { container } = render(
+      <MomentPicker onBlur={onBlur} suffixIcon={<div className="suffix-icon">X</div>} />,
+    );
+    openPicker(container);
+    keyDown(KeyCode.ESC);
+    fireEvent.mouseDown(container.querySelector('.suffix-icon'));
+    fireEvent.blur(container.querySelector('input'));
+    expect(onBlur).toHaveBeenCalledTimes(0);
+
+    fireEvent.blur(container.querySelector('input'));
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
   describe('full steps', () => {
     [
       {