form icon indicating copy to clipboard operation
form copied to clipboard

React Native/expo (web) onBlur resets onSubmit validation

Open RWOverdijk opened this issue 8 months ago • 0 comments

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

https://github.com/user-attachments/assets/a1a271f3-9e66-491d-b486-3093fe7dd6f9

Platform

  • OS: MacOS
  • Browser: Any

TanStack Form adapter

None

TanStack Form version

1.9.0

TypeScript version

5.8.3

Additional context

No response

RWOverdijk avatar May 01 '25 08:05 RWOverdijk