form icon indicating copy to clipboard operation
form copied to clipboard

Field submit error is removed on field blur without a change

Open matthiasschwarz opened this issue 10 months ago • 1 comments

Describe the bug

A submit error is removed on blur of a field when the value didn't change.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/hungry-sanderson-ycs6rd

Steps to reproduce

  1. Press submit without entering a name
  2. Focus the name input field
  3. Leave focus without a change

Expected behavior

The error which occured on submit is not removed on blur when the value during focus didn't change.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: WIndows
  • Browser: Chrome

TanStack Form adapter

react-form

TanStack Form version

1.0.2

TypeScript version

No response

Additional context

No response

matthiasschwarz avatar Mar 07 '25 13:03 matthiasschwarz

From what I find, the onChange validator will rightly handle the blurring by maintaining errors in the state.meta.errors. onSubmit however, is causing the blur event to clear the errors.

I might be wrong but I think this is where the problem is inFieldApi.ts:

/**
 *  when we have an error for onSubmit in the state, we want
 *  to clear the error as soon as the user enters a valid value in the field
 */
const submitErrKey = getErrorMapKey('submit')

if (
  this.state.meta.errorMap[submitErrKey] &&
  cause !== 'submit' &&
  !hasErrored
) {
  this.setMeta((prev) => ({
    ...prev,
    errorMap: {
      ...prev.errorMap,
      [submitErrKey]: undefined,
    },
  }))
}

Since blur's cause is not submit, but rather "change" in the case where we blur out of a field after submitting, it won't remap the hasErrored or the errorMap. I don't know if this is by design so I will let a maintainer comment on this.

theVedanta avatar Mar 08 '25 00:03 theVedanta