Closed
Description
Describe the bug
When using zodValidator, even if I set a valid value with setFieldValue, canSubmit does not become true
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
// ...
const formSchema = z.object({
age: z.string().optional().refine((data) => data != null && data !== '' && !isNaN(Number(data))),
ageSub: z.string().optional().refine((data) => data != null && data !== '' && !isNaN(Number(data))),
})
const form = useForm({
validatorAdapter: zodValidator(),
validators: {
onChange: formSchema
},
})
const onChangeAge = (handleChange) => (event: React.ChangeEvent<HTMLInputElement>) => {
handleChange(event.target.value)
form.setFieldValue('ageSub', event.target.value) // The validation for ageSub is not being executed here.
}
return (
<form>
<form.Field name="age">
{(field): React.ReactNode => {
return (
<Input
type="number"
onChange={(e): void => onChangeAge(field.handleChange)}
value={field.state.value?.toString()}
/>
)
}}
</form.Field>
<form.Subscribe
selector={(state): { isDisabled: boolean } => {
return { isDisabled: state.isPristine || !state.canSubmit }
}}
>
{({ isDisabled }): React.ReactNode => {
return (
<Button isDisabled={isDisabled} >
submit
</Button>
)
}}
</form.Subscribe>
</form>
)
In version 0.32.0, canSubmit became true with valid values (e.g., '5' or '6'), but in version 0.33.0, canSubmit remains false.
Expected behavior
I want validation to be executed when setFieldValue is called.
How often does this bug happen?
Every time
Platform
- OS: Mac
- Browser: Chrome
TanStack Form adapter
react-form
TanStack Form version
v0.33.0
TypeScript version
v5.6.3
Additional context
If I execute validateField after every setFieldValue call, the validation runs and behaves as expected. However, this was not necessary in version 0.32.0. I would like to know if this behavior is intentional or a bug.
like this.
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
// ...
const formSchema = z.object({
age: z.string().optional().refine((data) => data != null && data !== '' && !isNaN(Number(data))),
ageSub: z.string().optional().refine((data) => data != null && data !== '' && !isNaN(Number(data))),
})
const form = useForm({
validatorAdapter: zodValidator(),
validators: {
onChange: formSchema
},
})
const onChangeAge = (handleChange) => (event: React.ChangeEvent<HTMLInputElement>) => {
handleChange(event.target.value)
form.setFieldValue('ageSub', event.target.value)
form.validateField('ageSub', 'change') // Execute validation here.
}
return (
<form>
<form.Field name="age">
{(field): React.ReactNode => {
return (
<Input
type="number"
onChange={(e): void => onChangeAge(field.handleChange)}
value={field.state.value?.toString()}
/>
)
}}
</form.Field>
<form.Subscribe
selector={(state): { isDisabled: boolean } => {
return { isDisabled: state.isPristine || !state.canSubmit }
}}
>
{({ isDisabled }): React.ReactNode => {
return (
<Button isDisabled={isDisabled} >
submit
</Button>
)
}}
</form.Subscribe>
</form>
)
I think the behavior change might be due to the changes introduced in #925 , but I'm not certain.