fix(hooks): [use-focus-controller] form-disabled-status not trigger blur (#20891)

* fix(components): [input] form-disabled-status blur not validate

* fix: update hooks

Co-authored-by: xingyixiang <452282988@qq.com>

* test: add form disabled case

* fix: test import

* Update packages/hooks/use-focus-controller/index.ts

Co-authored-by: btea <2356281422@qq.com>

* refactor: import path

---------

Co-authored-by: xingyixiang <452282988@qq.com>
Co-authored-by: btea <2356281422@qq.com>

packages/components/form/__tests__/form.test.tsx

@@ -756,6 +756,56 @@ describe('Form', () => {
     expect(wrapper.find('.el-form-item__error').text()).toBe('age is: 1')
   })
 
+  it('should use form disabled input not trigger @blur', async () => {
+    const focusHandler = vi.fn()
+    const blurHandler = vi.fn()
+
+    const wrapper = mount({
+      setup() {
+        const disabled = ref(true)
+        const form = reactive({
+          name: '',
+        })
+        return () => (
+          <div>
+            <Form ref="form" model={form} disabled={disabled.value}>
+              <FormItem
+                label="Name"
+                prop="name"
+                rules={{
+                  required: true,
+                  message: 'Please input name',
+                  trigger: 'blur',
+                }}
+              >
+                <Input
+                  v-model={form.name}
+                  onBlur={blurHandler}
+                  onFocus={focusHandler}
+                />
+              </FormItem>
+            </Form>
+            <Button>Test</Button>
+          </div>
+        )
+      },
+    })
+    const input = wrapper.find('input')
+    const button = wrapper.findComponent(Button)
+
+    await input.trigger('mouseenter')
+    await input.trigger('focus')
+    expect(focusHandler).toHaveBeenCalledTimes(0)
+
+    await input.trigger('mouseleave')
+    await button.trigger('click')
+    await input.trigger('blur')
+    expect(blurHandler).toHaveBeenCalledTimes(0)
+    await nextTick()
+    const inputWrapper = wrapper.find('.el-input__wrapper')
+    expect(inputWrapper.attributes('tabindex')).toBeUndefined()
+  })
+
   describe('FormItem', () => {
     const onSuccess = vi.fn()
     const onError = vi.fn()

packages/components/form/src/hooks/use-form-common-props.ts

@@ -1,5 +1,6 @@
 import { computed, inject, ref, unref } from 'vue'
-import { useGlobalSize, useProp } from '@element-plus/hooks'
+import { useGlobalSize } from '@element-plus/hooks/use-size'
+import { useProp } from '@element-plus/hooks/use-prop'
 import { formContextKey, formItemContextKey } from '../constants'
 
 import type { ComponentSize } from '@element-plus/constants'

packages/components/form/src/hooks/use-form-item.ts

@@ -7,7 +7,7 @@ import {
   toRef,
   watch,
 } from 'vue'
-import { useId } from '@element-plus/hooks'
+import { useId } from '@element-plus/hooks/use-id'
 import { formContextKey, formItemContextKey } from '../constants'
 
 import type { ComputedRef, Ref, WatchStopHandle } from 'vue'

packages/hooks/use-focus-controller/index.ts

@@ -1,7 +1,7 @@
 import { getCurrentInstance, onMounted, ref, shallowRef, watch } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { isElement, isFunction } from '@element-plus/utils'
-import { useProp } from '../use-prop'
+import { useFormDisabled } from '@element-plus/components/form/src/hooks/use-form-common-props'
 import type { ShallowRef } from 'vue'
 
 interface UseFocusControllerOptions {
@@ -31,7 +31,7 @@ export function useFocusController<T extends { focus: () => void }>(
   const instance = getCurrentInstance()!
   const { emit } = instance
   const wrapperRef = shallowRef<HTMLElement>()
-  const disabled = useProp<boolean>('disabled')
+  const disabled = useFormDisabled()
   const isFocused = ref(false)
 
   const handleFocus = (event: FocusEvent) => {