fix: field defaultValue should precedence over form defaultValues (#463)

* fix: field `defaultValue` should precedence over form `defaultValues`

* chore: fix type

* chore: format

Author: minosss

packages/form-core/src/FieldApi.ts

@@ -101,6 +101,10 @@ export class FieldApi<
 
     this.name = opts.name as any
 
+    if (opts.defaultValue !== undefined) {
+      this.form.setFieldValue(this.name, opts.defaultValue as never)
+    }
+
     this.store = new Store<FieldState<TData>>(
       {
         value: this.getValue(),

packages/form-core/src/tests/FieldApi.spec.ts

@@ -20,6 +20,22 @@ describe('field api', () => {
     expect(field.getValue()).toBe('test')
   })
 
+  it('should use field default value first', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: 'test',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      defaultValue: 'other',
+      name: 'name',
+    })
+
+    expect(field.getValue()).toBe('other')
+  })
+
   it('should get default meta', () => {
     const form = new FormApi()
     const field = new FieldApi({

packages/react-form/src/tests/useField.test.tsx

@@ -18,13 +18,17 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
 
       return (
         <form.Provider>
           <form.Field
             name="firstName"
-            defaultValue="FirstName"
             children={(field) => {
               return (
                 <input
@@ -45,6 +49,47 @@ describe('useField', () => {
     expect(input).toHaveValue('FirstName')
   })
 
+  it('should use field default value first', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="otherName"
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('otherName')
+  })
+
   it('should not validate on change if isTouched is false', async () => {
     type Person = {
       firstName: string

packages/vue-form/src/tests/useForm.test.tsx

@@ -68,7 +68,7 @@ describe('useForm', () => {
       form.provideFormContext()
 
       return () => (
-        <form.Field name="firstName" defaultValue="">
+        <form.Field name="firstName">
           {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <p>{field.state.value}</p>
           )}
@@ -81,6 +81,37 @@ describe('useForm', () => {
     expect(queryByText('LastName')).not.toBeInTheDocument()
   })
 
+  it('should use field default value first', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
+      form.provideFormContext()
+
+      return () => (
+        <form.Field name="firstName" defaultValue="otherName">
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
+            <p>{field.state.value}</p>
+          )}
+        </form.Field>
+      )
+    })
+
+    const { findByText, queryByText } = render(Comp)
+    expect(await findByText('otherName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+
   it('should handle submitting properly', async () => {
     const Comp = defineComponent(() => {
       const submittedData = ref<{ firstName: string }>()