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 = () => {