Repository navigation
Closed
Labels
good first issueGood for newcomersGood for newcomerstype: bugThis is a bug in behaviour.This is a bug in behaviour.
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.
Reacted by mfrancis107 and Armanda
Metadata
Metadata
Assignees
Labels
good first issueGood for newcomersGood for newcomerstype: bugThis is a bug in behaviour.This is a bug in behaviour.
Activity
mfrancis107 commentedon Oct 31, 2024
Adding another example, I think this is probably the same underlying issue.
https://stackblitz.com/edit/tanstack-form-gpfjb6?file=src%2Findex.tsx
In this example either (First and Last are required) or Company Name
Steps to replicate:
Balastrong commentedon Nov 26, 2024
I think I found the issue, anyone wants to give it a try on a PR?
The journey starts here:
form/packages/form-core/src/FormApi.ts
Line 735 in aaeb8db
If the form validator has field errors they're spread into the fields, but if there are no (more) errors, nothing happens.
This means that if there are existing errors they're not removed and that's our bug.
Should be fixed on
validateSyncandvalidateAsync.OrlovAlexei commentedon Nov 29, 2024
@mfrancis107 I'm trying to correct in your example. I have a question) should all 3 errors be shown until all fields are filled in?
juanvilladev commentedon Feb 17, 2025
I was able to confirm that this issue is not specific to Zod. canSubmit remains false because the conditions under which we update FieldMeta to sync with the schema are not correct. Will take a crack at this one today.
See reproduction using native validation:
https://stackblitz.com/edit/vitejs-vite-pnqeugj1?file=src%2Fcomponents%2FForm.tsx