fix(components): [select] optimize the triggering of blur event (#11524)

* fix(components): [select] drop-down selection is not closed when blur

closed #10893, #10992

* fix(components): [select] optimize the triggering of blur event

* refactor(components): [select] optimize code

packages/components/select/__tests__/select.test.ts

@@ -7,6 +7,7 @@ import { ArrowDown, CaretTop, CircleClose } from '@element-plus/icons-vue'
 import { usePopperContainerId } from '@element-plus/hooks'
 import { hasClass } from '@element-plus/utils'
 import { ElFormItem } from '@element-plus/components/form'
+import sleep from '@element-plus/test-utils/sleep'
 import Select from '../src/select.vue'
 import Group from '../src/option-group.vue'
 import Option from '../src/option.vue'
@@ -1223,6 +1224,7 @@ describe('Select', () => {
     await input.trigger('focus')
     expect(handleFocus).toHaveBeenCalled()
     await input.trigger('blur')
+    await sleep(0)
     expect(handleBlur).toHaveBeenCalled()
   })
 
@@ -1249,6 +1251,7 @@ describe('Select', () => {
     await input.trigger('focus')
     expect(handleFocus).toHaveBeenCalled()
     await input.trigger('blur')
+    await sleep(0)
     expect(handleBlur).toHaveBeenCalled()
   })
 

packages/components/select/src/option.vue

@@ -86,7 +86,7 @@ export default defineComponent({
 
     function selectOptionClick() {
       if (props.disabled !== true && states.groupDisabled !== true) {
-        select.handleOptionSelect(vm, true)
+        select.handleOptionSelect(vm)
       }
     }
 

packages/components/select/src/select.vue

@@ -522,15 +522,13 @@ export default defineComponent({
       inputLength,
       filteredOptionsCount,
       visible,
-      softFocus,
       selectedLabel,
       hoverIndex,
       query,
       inputHovering,
       currentPlaceholder,
       menuVisibleOnFocus,
       isOnComposition,
-      isSilentBlur,
       options,
       cachedOptions,
       optionsCount,
@@ -650,15 +648,13 @@ export default defineComponent({
       inputLength,
       filteredOptionsCount,
       visible,
-      softFocus,
       selectedLabel,
       hoverIndex,
       query,
       inputHovering,
       currentPlaceholder,
       menuVisibleOnFocus,
       isOnComposition,
-      isSilentBlur,
       options,
       resetInputHeight,
       managePlaceholder,

packages/components/select/src/token.ts

@@ -31,7 +31,7 @@ export interface SelectContext {
   setSelected(): void
   onOptionCreate(vm: SelectOptionProxy): void
   onOptionDestroy(key: number | string | Record<string, any>): void
-  handleOptionSelect(vm: unknown, byClick: boolean): void
+  handleOptionSelect(vm: unknown): void
 }
 
 // For individual build sharing injection key, we had to make `Symbol` to string

packages/components/select/src/useSelect.ts

@@ -46,7 +46,6 @@ export function useSelectStates(props) {
     optionsCount: 0,
     filteredOptionsCount: 0,
     visible: false,
-    softFocus: false,
     selectedLabel: '',
     hoverIndex: -1,
     query: '',
@@ -56,12 +55,12 @@ export function useSelectStates(props) {
     currentPlaceholder: t('el.select.placeholder') as string | (() => string),
     menuVisibleOnFocus: false,
     isOnComposition: false,
-    isSilentBlur: false,
     prefixWidth: 11,
     tagInMultiLine: false,
     mouseEnter: false,
   })
 }
+let ignoreFocusEvent = false
 
 type States = ReturnType<typeof useSelectStates>
 
@@ -657,7 +656,7 @@ export const useSelect = (props, states: States, ctx) => {
     ctx.emit('clear')
   }
 
-  const handleOptionSelect = (option, byClick) => {
+  const handleOptionSelect = (option) => {
     if (props.multiple) {
       const value = (props.modelValue || []).slice()
       const optionIndex = getValueIndex(value, option.value)
@@ -682,7 +681,7 @@ export const useSelect = (props, states: States, ctx) => {
       emitChange(option.value)
       states.visible = false
     }
-    states.isSilentBlur = byClick
+
     setSoftFocus()
     if (states.visible) return
     nextTick(() => {
@@ -706,7 +705,6 @@ export const useSelect = (props, states: States, ctx) => {
   }
 
   const setSoftFocus = () => {
-    states.softFocus = true
     const _input = input.value || reference.value
     if (_input) {
       _input?.focus()
@@ -788,7 +786,7 @@ export const useSelect = (props, states: States, ctx) => {
   }
 
   const handleFocus = (event: FocusEvent) => {
-    if (!states.softFocus) {
+    if (!ignoreFocusEvent) {
       if (props.automaticDropdown || props.filterable) {
         if (props.filterable && !states.visible) {
           states.menuVisibleOnFocus = true
@@ -797,7 +795,7 @@ export const useSelect = (props, states: States, ctx) => {
       }
       ctx.emit('focus', event)
     } else {
-      states.softFocus = false
+      ignoreFocusEvent = false
     }
   }
 
@@ -808,15 +806,16 @@ export const useSelect = (props, states: States, ctx) => {
   }
 
   const handleBlur = (event: FocusEvent) => {
-    // https://github.com/ElemeFE/element/pull/10822
-    nextTick(() => {
-      if (states.isSilentBlur) {
-        states.isSilentBlur = false
-      } else {
-        ctx.emit('blur', event)
+    setTimeout(() => {
+      // validate current focus event is inside el-tooltip-content
+      // if so, ignore the blur event and the next focus event
+      if (tooltipRef.value?.isFocusInsideContent()) {
+        ignoreFocusEvent = true
+        return
       }
+      states.visible && handleClose()
+      ctx.emit('blur', event)
     })
-    states.softFocus = false
   }
 
   const handleClearClick = (event: Event) => {
@@ -858,7 +857,7 @@ export const useSelect = (props, states: States, ctx) => {
       toggleMenu()
     } else {
       if (optionsArray.value[states.hoverIndex]) {
-        handleOptionSelect(optionsArray.value[states.hoverIndex], undefined)
+        handleOptionSelect(optionsArray.value[states.hoverIndex])
       }
     }
   }

packages/components/tree-select/src/tree.ts

@@ -170,7 +170,7 @@ export const useTree = (
           const option = select.value?.options.get(
             getNodeValByProp('value', data)
           )
-          select.value?.handleOptionSelect(option, true)
+          select.value?.handleOptionSelect(option)
         }
       } else if (props.expandOnClickNode) {
         e.proxy.handleExpandIconClick()