fix(FormField): restore eager-validation prop behavior (#3031)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/Input.vue

@@ -74,7 +74,7 @@ const slots = defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props, { deferInputValidation: true })
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 

src/runtime/components/Textarea.vue

@@ -65,7 +65,7 @@ const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 
 const ui = computed(() => textarea({
   color: color.value,

src/runtime/composables/useFormField.ts

@@ -9,7 +9,6 @@ type Props<T> = {
   name?: string
   size?: GetObjectField<T, 'size'>
   color?: GetObjectField<T, 'color'>
-  eagerValidation?: boolean
   legend?: string
   highlight?: boolean
   disabled?: boolean
@@ -22,7 +21,7 @@ export const inputIdInjectionKey: InjectionKey<Ref<string | undefined>> = Symbol
 export const formInputsInjectionKey: InjectionKey<Ref<Record<string, { id?: string, pattern?: RegExp }>>> = Symbol('nuxt-ui.form-inputs')
 export const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>> = Symbol('nuxt-ui.form-loading')
 
-export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean }) {
+export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, deferInputValidation?: boolean }) {
   const formOptions = inject(formOptionsInjectionKey, undefined)
   const formBus = inject(formBusInjectionKey, undefined)
   const formField = inject(formFieldInjectionKey, undefined)
@@ -42,7 +41,7 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean }) {
     }
   }
 
-  const blurred = ref(false)
+  const touched = ref(false)
 
   function emitFormEvent(type: FormInputEvents, name?: string) {
     if (formBus && formField && name) {
@@ -51,17 +50,20 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean }) {
   }
 
   function emitFormBlur() {
+    touched.value = true
     emitFormEvent('blur', formField?.value.name)
-    blurred.value = true
   }
 
   function emitFormChange() {
+    touched.value = true
     emitFormEvent('change', formField?.value.name)
   }
 
   const emitFormInput = useDebounceFn(
     () => {
-      emitFormEvent('input', formField?.value.name)
+      if (!opts?.deferInputValidation || touched.value || formField?.value.eagerValidation) {
+        emitFormEvent('input', formField?.value.name)
+      }
     },
     formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
   )

test/components/Input.spec.ts

@@ -102,7 +102,7 @@ describe('Input', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormInputEvents[], eagerValidation?: boolean) {
       const wrapper = await renderForm({
         props: {
           validateOn,
@@ -114,10 +114,13 @@ describe('Input', () => {
           }
         },
         slotTemplate: `
-        <UFormField name="value">
+        <UFormField name="value" :eager-validation="eagerValidation">
           <UInput id="input" v-model="state.value" />
         </UFormField>
-        `
+        `,
+        slotVars: {
+          eagerValidation
+        }
       })
       const input = wrapper.find('#input')
       return {
@@ -147,7 +150,22 @@ describe('Input', () => {
     })
 
     test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'], true)
+      await input.setValue('value')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input without eager validation works', async () => {
       const { input, wrapper } = await createForm(['input'])
+
+      await input.setValue('value')
+      expect(wrapper.text()).not.toContain('Error message')
+
+      await input.trigger('blur')
+
       await input.setValue('value')
       expect(wrapper.text()).toContain('Error message')
 

test/components/Textarea.spec.ts

@@ -89,7 +89,7 @@ describe('Textarea', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormInputEvents[], eagerValidation?: boolean) {
       const wrapper = await renderForm({
         props: {
           validateOn,
@@ -101,10 +101,13 @@ describe('Textarea', () => {
           }
         },
         slotTemplate: `
-        <UFormField name="value">
+        <UFormField name="value" :eager-validation="eagerValidation">
           <UTextarea id="input" v-model="state.value" />
         </UFormField>
-        `
+        `,
+        slotVars: {
+          eagerValidation
+        }
       })
       const input = wrapper.find('#input')
       return {
@@ -134,7 +137,22 @@ describe('Textarea', () => {
     })
 
     test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'], true)
+      await input.setValue('value')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input without eager validation works', async () => {
       const { input, wrapper } = await createForm(['input'])
+
+      await input.setValue('value')
+      expect(wrapper.text()).not.toContain('Error message')
+
+      await input.trigger('blur')
+
       await input.setValue('value')
       expect(wrapper.text()).toContain('Error message')