Zod Transform being ignored

[JacobWeisenburger]

Describe the bug

When I make a form using a zod schema with a transformed field, tanstack-form seems to ignore the transform part.

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-jxdfvr?file=src%2FApp.tsx

Steps to reproduce

1. type anything into the text box
2. see that the form value is not being affected by the transform in the zod schema

Expected behavior

I would expect to see the form value be

{ foo: 'new value' }

Platform

Windows 11
Chrome Latest

Tanstack Form adapter

react-form

TanStack Form version

0.13.6

TypeScript version

5.3.2

Additional context

import { createFormFactory } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'

const schema = z.object( {
    foo: z.string().transform( () => 'new value' ),
} )

type FormOutput = z.output<typeof schema>

const formFactory = createFormFactory( {
    validatorAdapter: zodValidator,
    defaultValues: {
        foo: '',
    } as FormOutput,
} )

export default function Page () {
    const form = formFactory.useForm()
    const values = form.useStore( x => x.values )

    return <form.Provider>
        <form>
            <div style={{
                display: 'flex',
                gap: '1rem',
                flexDirection: 'column',
                alignItems: 'start',
            }}>
                <form.Field
                    name='foo'
                    validators={{
                        onChange: schema.shape.foo,
                    }}
                >
                    {field => <label style={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'start',
                        gap: '0.25rem',
                    }}>
                        <div>{field.name}:</div>
                        <input
                            id={field.name}
                            name={field.name}
                            value={field.state.value}
                            autoComplete='off'
                            onChange={e => {
                                field.handleChange( e.target.value )
                            }}
                        />
                    </label>}
                </form.Field>

                <span>
                    form value: <pre style={{ display: 'inline' }}>{JSON.stringify( values )}</pre>
                </span>

                <span>
                    form value should be: <pre style={{ display: 'inline' }}>{JSON.stringify( { foo: 'new value' } )}</pre>
                </span>
            </div>
        </form>
    </form.Provider>
}

[crutchcorn]

As-of today, we do not support Zod transforms. We'll likely need to explore this space as a dedicated feature - might not make it into 1.x

[crutchcorn]

Actually, I realize this work is captured in #418, let's move the convo over there