From 8908e738e5becc6757d583f70bb00520d66deb6e Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Fri, 11 Oct 2024 11:47:35 +0800
Subject: [PATCH] fix(components): [select] the blur not triggered when click
 the outside (#18478)

* fix(components): [select] the blur not triggered when click the outside

closed #18235, #18238

* test: add test
---
 .../components/select-v2/src/useSelect.ts     | 10 ++++---
 .../select/__tests__/select.test.ts           | 26 +++++++++++++++++++
 packages/components/select/src/useSelect.ts   | 10 ++++---
 3 files changed, 40 insertions(+), 6 deletions(-)

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(
+      `
+      <el-select @blur="handleBlur" />
+      <button>button</button>
+      `,
+      () => ({ 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 = () => {