From 41dc11ceefd8f505fbc5214fe61f12483b0da4a2 Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Mon, 6 Jan 2025 18:48:10 +0100 Subject: [PATCH] fix(FormField): restore `eager-validation` prop behavior (#3031) Co-authored-by: Benjamin Canac --- src/runtime/components/Input.vue | 2 +- src/runtime/components/Textarea.vue | 2 +- src/runtime/composables/useFormField.ts | 12 +++++++----- test/components/Input.spec.ts | 24 +++++++++++++++++++++--- test/components/Textarea.spec.ts | 24 +++++++++++++++++++++--- 5 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue index 692cdb66..51163112 100644 --- a/src/runtime/components/Input.vue +++ b/src/runtime/components/Input.vue @@ -74,7 +74,7 @@ const slots = defineSlots() const [modelValue, modelModifiers] = defineModel() -const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props) +const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props, { deferInputValidation: true }) const { orientation, size: buttonGroupSize } = useButtonGroup(props) const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props) diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue index a6be06e0..306e17ae 100644 --- a/src/runtime/components/Textarea.vue +++ b/src/runtime/components/Textarea.vue @@ -65,7 +65,7 @@ const emits = defineEmits() const [modelValue, modelModifiers] = defineModel() -const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField(props) +const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField(props, { deferInputValidation: true }) const ui = computed(() => textarea({ color: color.value, diff --git a/src/runtime/composables/useFormField.ts b/src/runtime/composables/useFormField.ts index 249aa8c2..73a4fa0c 100644 --- a/src/runtime/composables/useFormField.ts +++ b/src/runtime/composables/useFormField.ts @@ -9,7 +9,6 @@ type Props = { name?: string size?: GetObjectField color?: GetObjectField - eagerValidation?: boolean legend?: string highlight?: boolean disabled?: boolean @@ -22,7 +21,7 @@ export const inputIdInjectionKey: InjectionKey> = Symbol export const formInputsInjectionKey: InjectionKey>> = Symbol('nuxt-ui.form-inputs') export const formLoadingInjectionKey: InjectionKey>> = Symbol('nuxt-ui.form-loading') -export function useFormField(props?: Props, opts?: { bind?: boolean }) { +export function useFormField(props?: Props, 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(props?: Props, 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(props?: Props, 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 ) diff --git a/test/components/Input.spec.ts b/test/components/Input.spec.ts index 9e29c0bb..fde42ccc 100644 --- a/test/components/Input.spec.ts +++ b/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: ` - + - ` + `, + 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') diff --git a/test/components/Textarea.spec.ts b/test/components/Textarea.spec.ts index e626a233..da6cd3bf 100644 --- a/test/components/Textarea.spec.ts +++ b/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: ` - + - ` + `, + 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')