diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts index 0d54e3fcf..d2663daec 100644 --- a/src/hooks/usePickerInput.ts +++ b/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; } }), ); diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index c41044171..9047749d0 100644 --- a/tests/picker.spec.tsx +++ b/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( + X} />, + ); + 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', () => { [ {