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

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

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' })

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