React Native/expo (web) onBlur resets onSubmit validation

[RWOverdijk]

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

1. npm i
2. npm 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

[crutchcorn]

This happens even when using onSubmitEditing. This is really bizarre because it doesn't happen in React (non RNW). Let me dig in on why

[crutchcorn]

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 blur event, causing issues with our library.

To fix it, add this property to your TextField in RNW:

blurOnSubmit={false}

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!