fix(Form): handling race condition on clear function (#4843)

rdjanuar · benjamincanac · commit 2269b4831acb · 2025-09-12T18:03:54.000+02:00
diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
@@ -201,15 +201,21 @@ async function _validate<T extends boolean>(opts: ValidateOpts<boolean, boolean>
     : []
 
   if (names) {
-    const otherErrors = errors.value.filter(error => !names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name?.match(pattern))
-    }))
-
-    const pathErrors = (await getErrors()).filter(error => names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name?.match(pattern))
-    }))
+    const namesSet = new Set(names)
+    const patterns = names
+      .map(name => inputs.value?.[name]?.pattern)
+      .filter(Boolean) as RegExp[]
+
+    const isErrorForPath = (error: FormErrorWithId): boolean => {
+      if (!error.name) return false
+      if (namesSet.has(error.name)) return true
+      return patterns.some(pattern => pattern.test(error.name!))
+    }
+
+    const allNewErrors = await getErrors()
+
+    const otherErrors = errors.value.filter(error => !isErrorForPath(error))
+    const pathErrors = allNewErrors.filter(isErrorForPath)
 
     errors.value = otherErrors.concat(pathErrors)
   } else {
diff --git a/test/components/Form.spec.ts b/test/components/Form.spec.ts
@@ -13,6 +13,7 @@ import { renderForm } from '../utils/form'
 import {
   UForm,
   UInput,
+  URadioGroup,
   UFormField
 } from '#components'
 import { flushPromises } from '@vue/test-utils'
@@ -632,4 +633,65 @@ describe('Form', () => {
     await flushPromises()
     expect(wrapper.html()).toContain('Error message')
   })
+  it('should not have race condition when clear is called in watchers', async () => {
+    const wrapper = await mountSuspended({
+      components: {
+        UForm,
+        URadioGroup,
+        UFormField
+      },
+      setup() {
+        const form = ref()
+        const schema = z.object({
+          hello: z.string().optional(),
+          world: z.string().optional(),
+          hi: z.string().optional(),
+          pathForACustomError: z.string().optional()
+        })
+
+        const state = reactive({
+          hello: 'hello-1',
+          world: 'world-1',
+          hi: 'hi-1',
+          pathForACustomError: ''
+        })
+
+        return { form, state, schema }
+      },
+      template: `
+        <UForm ref="form" :schema="schema" :state="state">
+          <UFormField name="hello">
+            <URadioGroup v-model="state.hello" :items="[{ value: 'foo-1', label: 'Foo 1' }, { value: 'foo-2', label: 'Foo 2' }]" />
+          </UFormField>
+        </UForm>
+      `
+    })
+
+    const form = wrapper.setupState.form
+
+    const input = wrapper.findComponent({
+      name: 'RadioGroupRoot'
+    })
+
+    const state = wrapper.setupState.state
+
+    watch(() => state.hello, () => {
+      form.value?.clear('pathForACustomError')
+    })
+
+    form.value.setErrors([
+      {
+        name: 'pathForACustomError',
+        message: 'This is a custom error message.'
+      }
+    ])
+
+    expect(form.value.errors).toHaveLength(1)
+
+    input.setValue('foo-2')
+
+    await flushPromises()
+
+    expect(form.value.errors).toHaveLength(0)
+  })
 })
