From 949479699bc5158633edeb861dc2a00637a94952 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Wed, 7 Aug 2024 18:35:30 +0800
Subject: [PATCH] refactor(hooks): determine the focus by event listening
 (#17719)

* refactor(hooks): determine the focus by event listening

* test: skip the focus test

* test: fix test

* feat(hooks): add beforeFocus

* fix: optimize blur

* chore(components): [mention] remove focus & blur
---
 .../__tests__/autocomplete.test.tsx           |   2 +-
 .../__tests__/color-picker.test.tsx           |   2 +-
 .../color-picker/src/color-picker.vue         |  22 +---
 packages/components/input/src/input.vue       |  21 +--
 packages/components/mention/src/mention.vue   |   4 +-
 .../select-v2/__tests__/select.test.ts        |  25 ++--
 packages/components/select-v2/src/select.vue  |   2 -
 .../components/select-v2/src/useSelect.ts     |  41 +++---
 .../select/__tests__/select.test.ts           |  37 +++---
 packages/components/select/src/select.vue     |   2 -
 packages/components/select/src/useSelect.ts   |  41 +++---
 .../__tests__/use-focus-controller.test.tsx   | 120 ++++++++++++------
 packages/hooks/use-focus-controller/index.ts  |  47 +++++--
 13 files changed, 206 insertions(+), 160 deletions(-)

diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
index 04e9464d10..68a965cdfa 100644
--- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx
+++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
@@ -443,7 +443,7 @@ describe('Autocomplete.vue', () => {
     await wrapper.find('input').trigger('blur')
     vi.runAllTimers()
     await nextTick()
-    expect(onBlur).toHaveBeenCalledTimes(1)
+    expect(onBlur).toHaveBeenCalled()
   })
 
   describe('test a11y supports', () => {
diff --git a/packages/components/color-picker/__tests__/color-picker.test.tsx b/packages/components/color-picker/__tests__/color-picker.test.tsx
index 13858363e0..c3a3917b2a 100644
--- a/packages/components/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/components/color-picker/__tests__/color-picker.test.tsx
@@ -495,7 +495,7 @@ describe('Color-picker', () => {
     expect(focusHandler).toHaveBeenCalledTimes(1)
 
     await wrapper.find('.el-color-picker').trigger('blur')
-    expect(blurHandler).toHaveBeenCalledTimes(1)
+    expect(blurHandler).toHaveBeenCalled()
     wrapper.unmount()
   })
 })
diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index d7d02b1fa5..b08c090ed8 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -171,11 +171,10 @@ const popper = ref<TooltipInstance>()
 const triggerRef = ref()
 const inputRef = ref()
 
-const {
-  isFocused,
-  handleFocus: _handleFocus,
-  handleBlur,
-} = useFocusController(triggerRef, {
+const { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {
+  beforeFocus() {
+    return colorDisabled.value
+  },
   beforeBlur(event) {
     return popper.value?.isFocusInsideContent(event)
   },
@@ -185,11 +184,6 @@ const {
   },
 })
 
-const handleFocus = (event: FocusEvent) => {
-  if (colorDisabled.value) return blur()
-  _handleFocus(event)
-}
-
 // active-change is used to prevent modelValue changes from triggering.
 let shouldActiveChange = true
 
@@ -315,14 +309,10 @@ function clear() {
   resetColor()
 }
 
-function handleClickOutside(event: Event) {
+function handleClickOutside() {
   if (!showPicker.value) return
   hide()
-
-  if (isFocused.value) {
-    const _event = new FocusEvent('focus', event)
-    handleBlur(_event)
-  }
+  isFocused.value && focus()
 }
 
 function handleEsc(event: KeyboardEvent) {
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index 011a3ab800..a713f89560 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -52,8 +52,6 @@
           @compositionupdate="handleCompositionUpdate"
           @compositionend="handleCompositionEnd"
           @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
           @change="handleChange"
           @keydown="handleKeydown"
         />
@@ -132,8 +130,6 @@
         @compositionupdate="handleCompositionUpdate"
         @compositionend="handleCompositionEnd"
         @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
         @change="handleChange"
         @keydown="handleKeydown"
       />
@@ -261,16 +257,13 @@ const textareaCalcStyle = shallowRef(props.inputStyle)
 
 const _ref = computed(() => input.value || textarea.value)
 
-const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(
-  _ref,
-  {
-    afterBlur() {
-      if (props.validateEvent) {
-        elFormItem?.validate?.('blur').catch((err) => debugWarn(err))
-      }
-    },
-  }
-)
+const { wrapperRef, isFocused } = useFocusController(_ref, {
+  afterBlur() {
+    if (props.validateEvent) {
+      elFormItem?.validate?.('blur').catch((err) => debugWarn(err))
+    }
+  },
+})
 
 const needStatusIcon = computed(() => elForm?.statusIcon ?? false)
 const validateState = computed(() => elFormItem?.validateState || '')
diff --git a/packages/components/mention/src/mention.vue b/packages/components/mention/src/mention.vue
index 4b02d292bd..3c47659825 100644
--- a/packages/components/mention/src/mention.vue
+++ b/packages/components/mention/src/mention.vue
@@ -6,8 +6,6 @@
       :model-value="modelValue"
       @input="handleInputChange"
       @keydown="handleInputKeyDown"
-      @focus="handleFocus"
-      @blur="handleBlur"
       @mousedown="handleInputMouseDown"
     >
       <template v-for="(_, name) in $slots" #[name]="slotProps">
@@ -152,7 +150,7 @@ const handleInputKeyDown = (e: KeyboardEvent | Event) => {
   }
 }
 
-const { wrapperRef, handleFocus, handleBlur } = useFocusController(elInputRef, {
+const { wrapperRef } = useFocusController(elInputRef, {
   afterFocus() {
     syncAfterCursorMove()
   },
diff --git a/packages/components/select-v2/__tests__/select.test.ts b/packages/components/select-v2/__tests__/select.test.ts
index 650d22cc39..ebbaf05ef3 100644
--- a/packages/components/select-v2/__tests__/select.test.ts
+++ b/packages/components/select-v2/__tests__/select.test.ts
@@ -919,13 +919,11 @@ describe('Select', () => {
   })
 
   describe('event', () => {
-    it('focus & blur', async () => {
+    it('focus', async () => {
       const onFocus = vi.fn()
-      const onBlur = vi.fn()
       const wrapper = createSelect({
         methods: {
           onFocus,
-          onBlur,
         },
       })
       const select = wrapper.findComponent(Select)
@@ -935,13 +933,20 @@ describe('Select', () => {
       expect(input.exists()).toBe(true)
       await input.trigger('focus')
       expect(onFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it('blur', async () => {
+      const onBlur = vi.fn()
+      const wrapper = createSelect({
+        methods: {
+          onBlur,
+        },
+      })
+      const select = wrapper.findComponent(Select)
+      const input = select.find('input')
+      expect(input.exists()).toBe(true)
       await input.trigger('blur')
       expect(onBlur).toHaveBeenCalledTimes(1)
-
-      await input.trigger('focus')
-      expect(onFocus).toHaveBeenCalledTimes(2)
-      await input.trigger('blur')
-      expect(onBlur).toHaveBeenCalledTimes(2)
     })
 
     it('focus & blur for multiple & filterable select', async () => {
@@ -967,12 +972,12 @@ describe('Select', () => {
       await input.trigger('focus')
       expect(onFocus).toHaveBeenCalledTimes(1)
       await input.trigger('blur')
-      expect(onBlur).toHaveBeenCalledTimes(1)
+      expect(onBlur).toHaveBeenCalled()
 
       await input.trigger('focus')
       expect(onFocus).toHaveBeenCalledTimes(2)
       await input.trigger('blur')
-      expect(onBlur).toHaveBeenCalledTimes(2)
+      expect(onBlur).toHaveBeenCalled()
     })
 
     it('only emit change on user input', async () => {
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index e9387bbc49..5472f59b65 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -165,8 +165,6 @@
                 spellcheck="false"
                 type="text"
                 :name="name"
-                @focus="handleFocus"
-                @blur="handleBlur"
                 @input="onInput"
                 @compositionstart="handleCompositionStart"
                 @compositionupdate="handleCompositionUpdate"
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index d420c2d423..a34bab710b 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -103,27 +103,24 @@ const useSelect = (props: ISelectV2Props, emit) => {
     afterComposition: (e) => onInput(e),
   })
 
-  const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(
-    inputRef,
-    {
-      afterFocus() {
-        if (props.automaticDropdown && !expanded.value) {
-          expanded.value = true
-          states.menuVisibleOnFocus = true
-        }
-      },
-      beforeBlur(event) {
-        return (
-          tooltipRef.value?.isFocusInsideContent(event) ||
-          tagTooltipRef.value?.isFocusInsideContent(event)
-        )
-      },
-      afterBlur() {
-        expanded.value = false
-        states.menuVisibleOnFocus = false
-      },
-    }
-  )
+  const { wrapperRef, isFocused } = useFocusController(inputRef, {
+    afterFocus() {
+      if (props.automaticDropdown && !expanded.value) {
+        expanded.value = true
+        states.menuVisibleOnFocus = true
+      }
+    },
+    beforeBlur(event) {
+      return (
+        tooltipRef.value?.isFocusInsideContent(event) ||
+        tagTooltipRef.value?.isFocusInsideContent(event)
+      )
+    },
+    afterBlur() {
+      expanded.value = false
+      states.menuVisibleOnFocus = false
+    },
+  })
 
   const allOptions = ref([])
   const filteredOptions = ref([])
@@ -923,12 +920,10 @@ const useSelect = (props: ISelectV2Props, emit) => {
     getValue,
     getDisabled,
     getValueKey,
-    handleBlur,
     handleClear,
     handleClickOutside,
     handleDel,
     handleEsc,
-    handleFocus,
     focus,
     blur,
     handleMenuEnter,
diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index 540cabe519..31108fd466 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -1351,31 +1351,30 @@ describe('Select', () => {
     expect(vm.value.indexOf('选项4')).toBe(-1)
   })
 
-  test('event:focus & blur', async () => {
+  test('event:focus', async () => {
     const handleFocus = vi.fn()
-    const handleBlur = vi.fn()
-    wrapper = _mount(
-      `<el-select
-      @focus="handleFocus"
-      @blur="handleBlur" />`,
-      () => ({
-        handleFocus,
-        handleBlur,
-      })
-    )
+    wrapper = _mount(`<el-select @focus="handleFocus" />`, () => ({
+      handleFocus,
+    }))
     const select = wrapper.findComponent({ name: 'ElSelect' })
     const input = select.find('input')
 
     expect(input.exists()).toBe(true)
     await input.trigger('focus')
     expect(handleFocus).toHaveBeenCalledTimes(1)
+  })
+
+  test('event:blur', async () => {
+    const handleBlur = vi.fn()
+    wrapper = _mount(`<el-select @blur="handleBlur" />`, () => ({
+      handleBlur,
+    }))
+    const select = wrapper.findComponent({ name: 'ElSelect' })
+    const input = select.find('input')
+
+    expect(input.exists()).toBe(true)
     await input.trigger('blur')
     expect(handleBlur).toHaveBeenCalledTimes(1)
-
-    await input.trigger('focus')
-    expect(handleFocus).toHaveBeenCalledTimes(2)
-    await input.trigger('blur')
-    expect(handleBlur).toHaveBeenCalledTimes(2)
   })
 
   test('event:focus & blur for clearable & filterable', async () => {
@@ -1433,7 +1432,7 @@ describe('Select', () => {
 
     const input = select.find('input')
     await input.trigger('blur')
-    expect(handleBlur).toHaveBeenCalledTimes(1)
+    expect(handleBlur).toHaveBeenCalled()
   })
 
   test('event:focus & blur for multiple & filterable select', async () => {
@@ -1464,7 +1463,7 @@ describe('Select', () => {
     await input.trigger('focus')
     expect(handleFocus).toHaveBeenCalledTimes(2)
     await input.trigger('blur')
-    expect(handleBlur).toHaveBeenCalledTimes(2)
+    expect(handleBlur).toHaveBeenCalled()
   })
 
   test('event:focus & blur for multiple tag close', async () => {
@@ -1525,7 +1524,7 @@ describe('Select', () => {
     expect(handleFocus).toHaveBeenCalledTimes(1)
     expect(handleBlur).not.toHaveBeenCalled()
     await input.trigger('blur')
-    expect(handleBlur).toHaveBeenCalledTimes(1)
+    expect(handleBlur).toHaveBeenCalled()
   })
 
   test('should not open popper when automatic-dropdown not set', async () => {
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index f86d40d226..50c4c3f58c 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -166,8 +166,6 @@
                 :aria-label="ariaLabel"
                 aria-autocomplete="none"
                 aria-haspopup="listbox"
-                @focus="handleFocus"
-                @blur="handleBlur"
                 @keydown.down.stop.prevent="navigateOptions('next')"
                 @keydown.up.stop.prevent="navigateOptions('prev')"
                 @keydown.esc.stop.prevent="handleEsc"
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 429a5df684..06e5d789ae 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -101,27 +101,24 @@ export const useSelect = (props: ISelectProps, emit) => {
     afterComposition: (e) => onInput(e),
   })
 
-  const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(
-    inputRef,
-    {
-      afterFocus() {
-        if (props.automaticDropdown && !expanded.value) {
-          expanded.value = true
-          states.menuVisibleOnFocus = true
-        }
-      },
-      beforeBlur(event) {
-        return (
-          tooltipRef.value?.isFocusInsideContent(event) ||
-          tagTooltipRef.value?.isFocusInsideContent(event)
-        )
-      },
-      afterBlur() {
-        expanded.value = false
-        states.menuVisibleOnFocus = false
-      },
-    }
-  )
+  const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
+    afterFocus() {
+      if (props.automaticDropdown && !expanded.value) {
+        expanded.value = true
+        states.menuVisibleOnFocus = true
+      }
+    },
+    beforeBlur(event) {
+      return (
+        tooltipRef.value?.isFocusInsideContent(event) ||
+        tagTooltipRef.value?.isFocusInsideContent(event)
+      )
+    },
+    afterBlur() {
+      expanded.value = false
+      states.menuVisibleOnFocus = false
+    },
+  })
 
   // the controller of the expanded popup
   const expanded = ref(false)
@@ -852,10 +849,8 @@ export const useSelect = (props: ISelectProps, emit) => {
     onOptionCreate,
     onOptionDestroy,
     handleMenuEnter,
-    handleFocus,
     focus,
     blur,
-    handleBlur,
     handleClearClick,
     handleClickOutside,
     handleEsc,
diff --git a/packages/hooks/__tests__/use-focus-controller.test.tsx b/packages/hooks/__tests__/use-focus-controller.test.tsx
index bab97e390c..710b2d074a 100644
--- a/packages/hooks/__tests__/use-focus-controller.test.tsx
+++ b/packages/hooks/__tests__/use-focus-controller.test.tsx
@@ -34,19 +34,19 @@ describe('useFocusController', () => {
 
     await nextTick()
     expect(wrapper.find('span').text()).toBe('false')
-    expect(focusHandler).toHaveBeenCalledTimes(0)
-    expect(blurHandler).toHaveBeenCalledTimes(0)
+    expect(focusHandler).not.toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
 
     await wrapper.find('input').trigger('focus')
     expect(wrapper.emitted()).toHaveProperty('focus')
     expect(wrapper.find('span').text()).toBe('true')
-    expect(focusHandler).toHaveBeenCalledTimes(1)
-    expect(blurHandler).toHaveBeenCalledTimes(0)
+    expect(focusHandler).toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
 
     await wrapper.find('input').trigger('blur')
     expect(wrapper.emitted()).toHaveProperty('blur')
     expect(wrapper.find('span').text()).toBe('false')
-    expect(blurHandler).toHaveBeenCalledTimes(1)
+    expect(blurHandler).toHaveBeenCalled()
   })
 
   it('it will trigger focus & blur with tabindex', async () => {
@@ -79,19 +79,19 @@ describe('useFocusController', () => {
 
     await nextTick()
     expect(wrapper.find('span').text()).toBe('false')
-    expect(focusHandler).toHaveBeenCalledTimes(0)
-    expect(blurHandler).toHaveBeenCalledTimes(0)
+    expect(focusHandler).not.toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
 
     await wrapper.find('div').trigger('focus')
     expect(wrapper.emitted()).toHaveProperty('focus')
     expect(wrapper.find('span').text()).toBe('true')
-    expect(focusHandler).toHaveBeenCalledTimes(1)
-    expect(blurHandler).toHaveBeenCalledTimes(0)
+    expect(focusHandler).toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
 
     await wrapper.find('div').trigger('blur')
     expect(wrapper.emitted()).toHaveProperty('blur')
     expect(wrapper.find('span').text()).toBe('false')
-    expect(blurHandler).toHaveBeenCalledTimes(1)
+    expect(blurHandler).toHaveBeenCalled()
   })
 
   it('it will avoid trigger unnecessary blur event', async () => {
@@ -101,15 +101,14 @@ describe('useFocusController', () => {
       emits: ['focus', 'blur'],
       setup() {
         const targetRef = ref()
-        const { wrapperRef, isFocused, handleFocus, handleBlur } =
-          useFocusController(targetRef, {
-            afterFocus: focusHandler,
-            afterBlur: blurHandler,
-          })
+        const { wrapperRef, isFocused } = useFocusController(targetRef, {
+          afterFocus: focusHandler,
+          afterBlur: blurHandler,
+        })
 
         return () => (
           <div ref={wrapperRef}>
-            <input ref={targetRef} onFocus={handleFocus} onBlur={handleBlur} />
+            <input ref={targetRef} />
             <span>{String(isFocused.value)}</span>
           </div>
         )
@@ -119,24 +118,24 @@ describe('useFocusController', () => {
     await nextTick()
     expect(wrapper.find('span').text()).toBe('false')
     expect(wrapper.find('div').attributes('tabindex')).toBe('-1')
-    expect(focusHandler).toHaveBeenCalledTimes(0)
-    expect(blurHandler).toHaveBeenCalledTimes(0)
+    expect(focusHandler).not.toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
 
     await wrapper.find('input').trigger('focus')
     expect(wrapper.emitted()).toHaveProperty('focus')
     expect(wrapper.find('span').text()).toBe('true')
-    expect(focusHandler).toHaveBeenCalledTimes(1)
-    expect(blurHandler).toHaveBeenCalledTimes(0)
+    expect(focusHandler).toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
 
     await wrapper.find('span').trigger('click')
     expect(wrapper.emitted()).not.toHaveProperty('blur')
-    expect(focusHandler).toHaveBeenCalledTimes(1)
-    expect(blurHandler).toHaveBeenCalledTimes(0)
+    expect(focusHandler).toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
 
     await wrapper.find('input').trigger('blur')
     expect(wrapper.emitted()).toHaveProperty('blur')
     expect(wrapper.find('span').text()).toBe('false')
-    expect(blurHandler).toHaveBeenCalledTimes(1)
+    expect(blurHandler).toHaveBeenCalled()
   })
 
   it('it will avoid trigger unnecessary blur event by beforeBlur', async () => {
@@ -145,22 +144,17 @@ describe('useFocusController', () => {
       emits: ['focus', 'blur'],
       setup() {
         const targetRef = ref()
-        const { wrapperRef, isFocused, handleFocus, handleBlur } =
-          useFocusController(targetRef, {
-            afterBlur: () => {
-              beforeBlur()
-              return true
-            },
-          })
+        const { wrapperRef, isFocused } = useFocusController(targetRef, {
+          afterBlur: () => {
+            beforeBlur()
+            return true
+          },
+        })
 
         return () => (
           <>
             <div ref={wrapperRef}>
-              <input
-                ref={targetRef}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-              />
+              <input ref={targetRef} />
             </div>
             <span>{String(isFocused.value)}</span>
           </>
@@ -170,15 +164,65 @@ describe('useFocusController', () => {
 
     await nextTick()
     expect(wrapper.find('span').text()).toBe('false')
-    expect(beforeBlur).toHaveBeenCalledTimes(0)
+    expect(beforeBlur).not.toHaveBeenCalled()
 
     await wrapper.find('input').trigger('focus')
     expect(wrapper.emitted()).toHaveProperty('focus')
     expect(wrapper.find('span').text()).toBe('true')
-    expect(beforeBlur).toHaveBeenCalledTimes(0)
+    expect(beforeBlur).not.toHaveBeenCalled()
 
     await wrapper.find('span').trigger('click')
     expect(wrapper.emitted()).not.toHaveProperty('blur')
-    expect(beforeBlur).toHaveBeenCalledTimes(0)
+    expect(beforeBlur).not.toHaveBeenCalled()
+  })
+
+  it('it will avoid triggering unnecessary blur events even with multiple input', async () => {
+    const focusHandler = vi.fn()
+    const blurHandler = vi.fn()
+    const wrapper = mount({
+      emits: ['focus', 'blur'],
+      setup() {
+        const targetRef = ref()
+        const { isFocused, wrapperRef } = useFocusController(targetRef, {
+          afterFocus: focusHandler,
+          afterBlur: blurHandler,
+        })
+
+        return () => (
+          <div ref={wrapperRef}>
+            <input ref={targetRef} />
+            <input class="input2" />
+            <span>{String(isFocused.value)}</span>
+          </div>
+        )
+      },
+    })
+
+    await nextTick()
+    expect(wrapper.find('span').text()).toBe('false')
+    expect(focusHandler).not.toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
+
+    await wrapper.find('input').trigger('focus')
+    expect(wrapper.emitted()).toHaveProperty('focus')
+    expect(wrapper.find('span').text()).toBe('true')
+    expect(focusHandler).toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
+
+    await wrapper.find('.input2').trigger('focus')
+    expect(wrapper.emitted()).toHaveProperty('focus')
+    expect(wrapper.find('span').text()).toBe('true')
+    expect(focusHandler).toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
+
+    await wrapper.find('span').trigger('click')
+    expect(wrapper.emitted()).not.toHaveProperty('blur')
+    expect(focusHandler).toHaveBeenCalled()
+    expect(blurHandler).not.toHaveBeenCalled()
+
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.emitted()).toHaveProperty('blur')
+    expect(wrapper.find('span').text()).toBe('false')
+    expect(blurHandler).toHaveBeenCalled()
   })
 })
diff --git a/packages/hooks/use-focus-controller/index.ts b/packages/hooks/use-focus-controller/index.ts
index c6436ca8eb..86bcb80263 100644
--- a/packages/hooks/use-focus-controller/index.ts
+++ b/packages/hooks/use-focus-controller/index.ts
@@ -1,9 +1,14 @@
-import { getCurrentInstance, ref, shallowRef, watch } from 'vue'
+import { getCurrentInstance, onMounted, ref, shallowRef, watch } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { isFunction } from '@element-plus/utils'
+import { isElement, isFunction } from '@element-plus/utils'
 import type { ShallowRef } from 'vue'
 
 interface UseFocusControllerOptions {
+  /**
+   * return true to cancel focus
+   * @param event FocusEvent
+   */
+  beforeFocus?: (event: FocusEvent) => boolean | undefined
   afterFocus?: () => void
   /**
    * return true to cancel blur
@@ -15,7 +20,12 @@ interface UseFocusControllerOptions {
 
 export function useFocusController<T extends { focus: () => void }>(
   target: ShallowRef<T | undefined>,
-  { afterFocus, beforeBlur, afterBlur }: UseFocusControllerOptions = {}
+  {
+    beforeFocus,
+    afterFocus,
+    beforeBlur,
+    afterBlur,
+  }: UseFocusControllerOptions = {}
 ) {
   const instance = getCurrentInstance()!
   const { emit } = instance
@@ -23,7 +33,8 @@ export function useFocusController<T extends { focus: () => void }>(
   const isFocused = ref(false)
 
   const handleFocus = (event: FocusEvent) => {
-    if (isFocused.value) return
+    const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false
+    if (cancelFocus || isFocused.value) return
     isFocused.value = true
     emit('focus', event)
     afterFocus?.()
@@ -44,6 +55,12 @@ export function useFocusController<T extends { focus: () => void }>(
   }
 
   const handleClick = () => {
+    if (
+      wrapperRef.value?.contains(document.activeElement) &&
+      wrapperRef.value !== document.activeElement
+    )
+      return
+
     target.value?.focus()
   }
 
@@ -53,14 +70,28 @@ export function useFocusController<T extends { focus: () => void }>(
     }
   })
 
-  // TODO: using useEventListener will fail the test
-  // useEventListener(target, 'focus', handleFocus)
-  // useEventListener(target, 'blur', handleBlur)
+  useEventListener(wrapperRef, 'focus', handleFocus, true)
+  useEventListener(wrapperRef, 'blur', handleBlur, true)
   useEventListener(wrapperRef, 'click', handleClick, true)
 
+  // only for test
+  if (process.env.NODE_ENV === 'test') {
+    onMounted(() => {
+      const targetEl = isElement(target.value)
+        ? target.value
+        : document.querySelector('input,textarea')
+
+      if (targetEl) {
+        useEventListener(targetEl, 'focus', handleFocus, true)
+        useEventListener(targetEl, 'blur', handleBlur, true)
+      }
+    })
+  }
+
   return {
-    wrapperRef,
     isFocused,
+    /** Avoid using wrapperRef and handleFocus/handleBlur together */
+    wrapperRef,
     handleFocus,
     handleBlur,
   }