Repository navigation
React Native/expo (web) onBlur resets onSubmit validation #1472
Description
Describe the bug
I am not 100% sure if this is a bug or a pebkac.
Setting up a form with onSubmit validation causes strange validation behavior when submitting the form. The validation appears briefly before disappearing again. It's like the submit validation kicks in, and the blur then clears it.
Your minimal, reproducible example
https://github.com/RWOverdijk/form-blur-repro
Steps to reproduce
I made the most barebones repro I could.
Repro: https://github.com/RWOverdijk/form-blur-repro
npm inpm run web
Then to reproduce, focus on either of the two form fields and hit enter on your keyboard, no need to type anything in the fields.
The repro code lives in app/index.tsx.
To "fix it" you can comment out the 2 onBlurs (onBlur={field.handleBlur}) in that file. This is obviously not really a fix, but shows intended vs actual behaviour.
Expected behavior
Normal validation. The errors stay.
How often does this bug happen?
Every time
Screenshots or Videos
Screen.Recording.2025-04-25.at.17.24.44.mov
Platform
- OS: MacOS
- Browser: Any
TanStack Form adapter
None
TanStack Form version
1.9.0
TypeScript version
5.8.3
Additional context
No response
Activity
crutchcorn commentedon May 10, 2026
This happens even when using
onSubmitEditing. This is really bizarre because it doesn't happen in React (non RNW). Let me dig in on whycrutchcorn commentedon May 10, 2026
Figured it out: It's not a bug with us but a behavior from RNW causing havoc.
When a form is submitted, you get a
blurevent, causing issues with our library.To fix it, add this property to your
TextFieldin RNW:You'll get a note from your IDE that it's deprecated, but the RN (not web) alternative is not part of the library yet:
necolas/react-native-web#2817
Watch that issue and use
blurOnSubmit={false}for now to fix this.Cheers!