From 7d98df9c4decbec96d94e551600d3f515f0de480 Mon Sep 17 00:00:00 2001
From: luoyz <luoyz2349@outlook.com>
Date: Fri, 14 Apr 2023 11:39:01 +0800
Subject: [PATCH] fix: prevent picker blur when still in focus

---
 src/hooks/usePickerInput.ts |  5 +++--
 tests/picker.spec.tsx       | 25 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts
index 9b781f03d..92a18e7c5 100644
--- a/src/hooks/usePickerInput.ts
+++ b/src/hooks/usePickerInput.ts
@@ -167,10 +167,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;
 
@@ -181,6 +180,8 @@ export default function usePickerInput({
         } else if (!focused || clickedOutside) {
           triggerOpen(false);
         }
+      } else if (focused && !clickedOutside) {
+        preventBlurRef.current = true;
       }
     }),
   );
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index d044b1536..decf1b04f 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -314,6 +314,31 @@ describe('Picker.Basic', () => {
     expect(preventDefault).toHaveBeenCalled();
   });
 
+  it('not fire blur when clickinside and is in focus ', () => {
+    const onBlur = jest.fn();
+    const wrapper = mount(
+      <MomentPicker onBlur={onBlur} suffixIcon={<div className="suffix-icon">X</div>} />,
+    );
+    wrapper.openPicker();
+    wrapper.find('input').simulate('keyDown', { which: KeyCode.ESC });
+    // workaround: fire an event that bubbles from suffix div to window
+    const mouseDownEvent = new MouseEvent('mousedown', {
+      view: window,
+      bubbles: true,
+    });
+    Reflect.defineProperty(mouseDownEvent, 'target', {
+      value: wrapper.find('.suffix-icon').getDOMNode(),
+      enumerable: true,
+    });
+    fireEvent(window, mouseDownEvent);
+
+    wrapper.find('input').simulate('blur');
+    expect(onBlur).toHaveBeenCalledTimes(0);
+
+    wrapper.find('input').simulate('blur');
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
   describe('full steps', () => {
     [
       {