fix(components): [autocomplete] the blur event is not triggered

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -384,4 +384,50 @@ describe('Autocomplete.vue', () => {
       expect(formItem.attributes().role).toBe('group')
     })
   })
+
+  test('event:focus', async () => {
+    const onFocus = vi.fn()
+    const wrapper = _mount({ onFocus })
+    await nextTick()
+
+    const target = wrapper.getComponent(Autocomplete).vm as InstanceType<
+      typeof Autocomplete
+    >
+
+    await wrapper.find('input').trigger('focus')
+    vi.runAllTimers()
+    await nextTick()
+    expect(onFocus).toHaveBeenCalledTimes(1)
+
+    await target.handleSelect({ value: 'Go', tag: 'go' })
+    expect(target.modelValue).toBe('Go')
+    vi.runAllTimers()
+    await nextTick()
+    expect(onFocus).toHaveBeenCalledTimes(1)
+
+    await wrapper.find('input').trigger('blur')
+    vi.runAllTimers()
+    await nextTick()
+    expect(onFocus).toHaveBeenCalledTimes(1)
+  })
+
+  test('event:blur', async () => {
+    const onBlur = vi.fn()
+    const wrapper = _mount({ onBlur })
+    await nextTick()
+
+    const target = wrapper.getComponent(Autocomplete).vm as InstanceType<
+      typeof Autocomplete
+    >
+
+    await wrapper.find('input').trigger('focus')
+    await target.handleSelect({ value: 'Go', tag: 'go' })
+    expect(target.modelValue).toBe('Go')
+    expect(onBlur).toHaveBeenCalledTimes(0)
+
+    await wrapper.find('input').trigger('blur')
+    vi.runAllTimers()
+    await nextTick()
+    expect(onBlur).toHaveBeenCalledTimes(1)
+  })
 })

packages/components/autocomplete/src/autocomplete.vue

@@ -14,7 +14,6 @@
     :transition="`${ns.namespace.value}-zoom-in-top`"
     persistent
     @before-show="onSuggestionShow"
-    @show="onShow"
     @hide="onHide"
   >
     <div
@@ -178,12 +177,7 @@ const onSuggestionShow = async () => {
   }
 }
 
-const onShow = () => {
-  ignoreFocusEvent = true
-}
-
 const onHide = () => {
-  ignoreFocusEvent = false
   highlightedIndex.value = -1
 }
 
@@ -245,19 +239,29 @@ const handleChange = (value: string) => {
 }
 
 const handleFocus = (evt: FocusEvent) => {
-  if (ignoreFocusEvent) return
+  if (!ignoreFocusEvent) {
+    activated.value = true
+    emit('focus', evt)
 
-  activated.value = true
-  emit('focus', evt)
-  // fix https://github.com/element-plus/element-plus/issues/8278
-  if (props.triggerOnFocus && !readonly) {
-    debouncedGetData(String(props.modelValue))
+    if (props.triggerOnFocus && !readonly) {
+      debouncedGetData(String(props.modelValue))
+    }
+  } else {
+    ignoreFocusEvent = false
   }
 }
 
 const handleBlur = (evt: FocusEvent) => {
-  if (ignoreFocusEvent) return
-  emit('blur', evt)
+  setTimeout(() => {
+    // validate current focus event is inside el-tooltip-content
+    // if so, ignore the blur event and the next focus event
+    if (popperRef.value?.isFocusInsideContent()) {
+      ignoreFocusEvent = true
+      return
+    }
+    activated.value && close()
+    emit('blur', evt)
+  })
 }
 
 const handleClear = () => {