diff --git a/src/runtime/composables/useFormField.ts b/src/runtime/composables/useFormField.ts index 2645545f..e750bf3e 100644 --- a/src/runtime/composables/useFormField.ts +++ b/src/runtime/composables/useFormField.ts @@ -1,4 +1,4 @@ -import { inject, computed, type InjectionKey, type Ref, type ComputedRef } from 'vue' +import { inject, computed, type InjectionKey, type Ref, type ComputedRef, provide } from 'vue' import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core' import type { FormFieldProps } from '../types' import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form' @@ -15,7 +15,7 @@ type Props = { export const formOptionsInjectionKey: InjectionKey> = Symbol('nuxt-ui.form-options') export const formBusInjectionKey: InjectionKey, string>> = Symbol('nuxt-ui.form-events') -export const formFieldInjectionKey: InjectionKey>> = Symbol('nuxt-ui.form-field') +export const formFieldInjectionKey: InjectionKey> | undefined> = Symbol('nuxt-ui.form-field') export const inputIdInjectionKey: InjectionKey> = Symbol('nuxt-ui.input-id') export const formInputsInjectionKey: InjectionKey>> = Symbol('nuxt-ui.form-inputs') export const formLoadingInjectionKey: InjectionKey>> = Symbol('nuxt-ui.form-loading') @@ -27,6 +27,9 @@ export function useFormField(props?: Props, opts?: { bind?: boolean, defer const formInputs = inject(formInputsInjectionKey, undefined) const inputId = inject(inputIdInjectionKey, undefined) + // Blocks the FormField injection to avoid duplicating events when nesting input components. + provide(formFieldInjectionKey, undefined) + if (formField && inputId) { if (opts?.bind === false) { // Removes for="..." attribute on label for RadioGroup and alike.