[v2] Blurring the field with "change" trigger clears errors.

[napewnoarnold]

Describe the bug

When a form has no blur validator blurring any input will clear errors from other triggers

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-fwx1qdqm?file=src%2Frhf-revalidate.tsx

Steps to reproduce

1. Press submit
2. Focus any field
3. Blur the field & observe error dissapearing

Expected behavior

When I specify validator with only one trigger - "change", i want errors to persist blurring.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

every platform, not related to platform

TanStack Form adapter

react-form

TanStack Form version

2.0.0-alpha.1

TypeScript version

6.0.3

Additional context

No response

[napewnoarnold]

In the blog example https://tanstack.com/blog/announcing-tanstack-form-v2-alpha#conditional-validators v1 and v2 examples are not equivalent because revalidateLogic() will not clear the error on blur

[LeCarbonator]

Right, so this is actually a different process happening here: Stale error clearing.

Basically, v2 does the following checks:

1. Is the current event a client interaction? (This currently includes change and blur)
2. Are there errors from stale events present? (submit, mount and server. Reasoning is that it's not clear whether the error is still relevant after a stable event like change)
3. Is the validator not going to validate in this process? (Don't eagerly remove an error if the validator was going to fire again anyways)

For the reproduction, a validator that fires on change and submit, all three checks pass:

• Caused by blur
• Error came from submit
• The validator isn't firing on blur

If all three checks pass, the error is removed. So really, this brings up the question of:

• Is blurring a field an active choice by the user?
• Should it be considered an interaction?

I assume by your description and expectation, you'd say that only change should clear the stale errors?

[napewnoarnold]

I think yes, only change should clear errors.
I see value change as reason to validate form, and blur as a helper event to hide early errors. So blurring shouldn't clear the errors, or trigger validators, only change the "meta" state of the field, and it's up to the developer to draw ui that will hide errors until that field blurred.

As a developer when i write something like this:

  const form = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validators: [{ run: schema, triggers: ['change'] }],
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });

i am not expectin anything when blur event fires.

--

As a user blurring unchanged field could mislead that the value inside is no longer incorrect.

--

Now that i think about it maybe if state.errors contained errors produced by the defaultValues instantly on mount, that would feel like the pattern of "ui as a function of state". But i have no clue how achievable that is.

--

Is the current event a client interaction?

Yes, but i think the question should be "did the value change?" So only change event - the form library change event.

[LeCarbonator]

Well, that can be expanded though. By that logic,

  const form = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validators: [{ run: schema, triggers: [] }],
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });

Only runs on submit, but I bet you'd still expect change to clear the error.

Anyways, sort of unrelated to the blur. We'll discuss the stale vs. interaction event stuff, so until that's resolved, the issue'll stay open.

[napewnoarnold]

I've been thinking about this too much lately to objectivly say what i'd expect 😄 Plese do share what you decide and why, would love to hear about it.