diff --git a/packages/components/form/__tests__/form.test.tsx b/packages/components/form/__tests__/form.test.tsx index 74580f1a0c..c573725b2f 100644 --- a/packages/components/form/__tests__/form.test.tsx +++ b/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 () => ( +
+
+ + + +
+ +
+ ) + }, + }) + 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() diff --git a/packages/components/form/src/hooks/use-form-common-props.ts b/packages/components/form/src/hooks/use-form-common-props.ts index 17e46a5f50..1e993fc835 100644 --- a/packages/components/form/src/hooks/use-form-common-props.ts +++ b/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' diff --git a/packages/components/form/src/hooks/use-form-item.ts b/packages/components/form/src/hooks/use-form-item.ts index 28c29047d1..09986c9c1f 100644 --- a/packages/components/form/src/hooks/use-form-item.ts +++ b/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' diff --git a/packages/hooks/use-focus-controller/index.ts b/packages/hooks/use-focus-controller/index.ts index cc1c6ce1ca..f7ef1c1983 100644 --- a/packages/hooks/use-focus-controller/index.ts +++ b/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 void }>( const instance = getCurrentInstance()! const { emit } = instance const wrapperRef = shallowRef() - const disabled = useProp('disabled') + const disabled = useFormDisabled() const isFocused = ref(false) const handleFocus = (event: FocusEvent) => {