deep-jade

onBlur doesnt trigger in form composition ?

I was trying out form composition. but onSubmit, onChange, all of those triggers validation errors. However, onBlur doesnt seem to trigger any validation errors until i submit the form. https://tanstack.com/form/latest/docs/framework/react/examples/large-form?panel=sandbox try changing the onChange in page.tsx to onBlur in this example how can i fix this ? it worked fine with the simple form example.

4 Replies

fair-rose•3mo ago

Do you handle the blur event on your input? In the example you shared you would need to add:

<input
    value={field.state.value}
    onChange={(e) => field.handleChange(e.target.value)}
    onBlur={() => field.handleBlur()}
/>

<input
    value={field.state.value}
    onChange={(e) => field.handleChange(e.target.value)}
    onBlur={() => field.handleBlur()}
/>

deep-jadeOP•3mo ago

that worked! thanks 🙂 however i now run into this issue, https://github.com/TanStack/form/issues/1587 but i guess I'll reply to that there.

fair-rose•3mo ago

it may be a misunderstanding of how onBlur works. See the comment I left explaining it: https://github.com/TanStack/form/issues/1587#issuecomment-2989860576 if it's unrelated to that, let me know :PepeThumbs:

GitHub

onBlur validation weird behaviour · Issue #1587 · TanStack/form

Describe the bug onBlur validation is showing a validation message for a required field when the field is not blank Your minimal, reproducible example https://stackblitz.com/edit/tanstack-form-jxyk...

deep-jadeOP•3mo ago

yes i read your post. it made sense. and got it fixed. thank you.

Gaming

Programming

onBlur doesnt trigger in form composition ?

Did you find this page helpful?