fix(Form)!: resolve async validation in yup & issue directly mutate state (#2702)

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

src/runtime/components/Form.vue

@@ -104,6 +104,7 @@ function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
   }))
 }
 
+const parsedValue = ref<T | null>(null)
 async function getErrors(): Promise<FormErrorWithId[]> {
   let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
 
@@ -112,7 +113,7 @@ async function getErrors(): Promise<FormErrorWithId[]> {
     if (errors) {
       errs = errs.concat(errors)
     } else {
-      Object.assign(props.state, result)
+      parsedValue.value = result
     }
   }
 
@@ -169,7 +170,7 @@ async function onSubmitWrapper(payload: Event) {
 
   try {
     await _validate({ nested: true })
-    event.data = props.state
+    event.data = props.schema ? parsedValue.value : props.state
     await props.onSubmit?.(event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {

src/runtime/utils/form.ts

@@ -72,7 +72,7 @@ async function validateYupSchema(
   schema: YupObjectSchema<any>
 ): Promise<ValidateReturnSchema<typeof state>> {
   try {
-    const result = schema.validateSync(state, { abortEarly: false })
+    const result = await schema.validate(state, { abortEarly: false })
     return {
       errors: null,
       result

test/components/Form.spec.ts

@@ -422,7 +422,6 @@ describe('Form', () => {
         `
         })
         const form = wrapper.setupState.form
-        const state = wrapper.setupState.state
 
         const inputEl = wrapper.find('#input')
         inputEl.setValue(input.value)
@@ -430,7 +429,6 @@ describe('Form', () => {
         form.value.submit()
         await flushPromises()
 
-        expect(state.value).toEqual(expected.value)
         expect(wrapper.setupState.onSubmit).toHaveBeenCalledWith(expect.objectContaining({
           data: expected
         }))