diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts index 02e2da1410..046ad578e7 100644 --- a/packages/components/select-v2/src/useSelect.ts +++ b/packages/components/select-v2/src/useSelect.ts @@ -106,7 +106,7 @@ const useSelect = (props: ISelectV2Props, emit: SelectEmitFn) => { afterComposition: (e) => onInput(e), }) - const { wrapperRef, isFocused } = useFocusController(inputRef, { + const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, { beforeFocus() { return selectDisabled.value }, @@ -708,9 +708,13 @@ const useSelect = (props: ISelectV2Props, emit: SelectEmitFn) => { } } - const handleClickOutside = () => { + const handleClickOutside = (event: Event) => { expanded.value = false - isFocused.value && blur() + + if (isFocused.value) { + const _event = new FocusEvent('focus', event) + handleBlur(_event) + } } const handleMenuEnter = () => { diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts index 377b6e4146..54260677e4 100644 --- a/packages/components/select/__tests__/select.test.ts +++ b/packages/components/select/__tests__/select.test.ts @@ -1527,6 +1527,32 @@ describe('Select', () => { expect(handleBlur).toHaveBeenCalled() }) + it('should be target blur event when click outside', async () => { + const handleBlur = vi.fn() + wrapper = _mount( + ` + + + `, + () => ({ handleBlur }) + ) + const select = wrapper.findComponent({ name: 'ElSelect' }) + const input = select.find('input') + await input.trigger('focus') + + expect(wrapper.find(`.${WRAPPER_CLASS_NAME}`).classes()).toContain( + 'is-focused' + ) + + await wrapper.find('button').trigger('mousedown') + await wrapper.find('button').trigger('mouseup') + + expect(wrapper.find(`.${WRAPPER_CLASS_NAME}`).classes()).not.toContain( + 'is-focused' + ) + expect(handleBlur).toHaveBeenCalledTimes(1) + }) + test('should not open popper when automatic-dropdown not set', async () => { wrapper = getSelectVm() const select = wrapper.findComponent({ name: 'ElSelect' }) diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index 57e976d788..5301329274 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -103,7 +103,7 @@ export const useSelect = (props: ISelectProps, emit) => { afterComposition: (e) => onInput(e), }) - const { wrapperRef, isFocused } = useFocusController(inputRef, { + const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, { beforeFocus() { return selectDisabled.value }, @@ -669,9 +669,13 @@ export const useSelect = (props: ISelectProps, emit) => { deleteSelected(event) } - const handleClickOutside = () => { + const handleClickOutside = (event: Event) => { expanded.value = false - isFocused.value && blur() + + if (isFocused.value) { + const _event = new FocusEvent('focus', event) + nextTick(() => handleBlur(_event)) + } } const handleEsc = () => {