fix: set fields to isBlurred only after field blur event

[Pascalmh]

this is a followup for #939

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 8aad2b1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-valibot
• @tanstack/form-example-angular-yup
• @tanstack/form-example-angular-zod
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-compiler
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-react-valibot
• @tanstack/form-example-react-yup
• @tanstack/form-example-react-zod
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-valibot
• @tanstack/form-example-vue-yup
• @tanstack/form-example-vue-zod
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-valibot
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-yup
• @tanstack/form-example-solid-zod

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@940

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@940

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@940

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@940

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@940

@tanstack/valibot-form-adapter

npm i https://pkg.pr.new/@tanstack/valibot-form-adapter@940

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@940

@tanstack/yup-form-adapter

npm i https://pkg.pr.new/@tanstack/yup-form-adapter@940

@tanstack/zod-form-adapter

npm i https://pkg.pr.new/@tanstack/zod-form-adapter@940

commit: 8aad2b1

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.75%. Comparing base (ab9dd76) to head (8aad2b1).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #940      +/-   ##
==========================================
- Coverage   86.79%   86.75%   -0.05%     
==========================================
  Files          29       29              
  Lines        1159     1155       -4     
  Branches      298      298              
==========================================
- Hits         1006     1002       -4     
  Misses        140      140              
  Partials       13       13              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[crutchcorn]

See comment for change required

[Pascalmh]

@crutchcorn I implemented the changes as requested and added some more tests, could you please re-check?

[Pascalmh]

@Balastrong the isBlurred state of the fields in the form are kept now (removed the batch part and updated the test) -

FYI: you'll need to use submissionAttempts instead of isSubmitted to display the errors as isSubmitted is set to false again inside the handleSubmit-function:

// FormApi.ts

handleSubmit = async () => {
    this.store.setState((old) => ({
      ...old,
      // Submission attempts mark the form as not submitted
      isSubmitted: false,
      // Count submission attempts
      submissionAttempts: old.submissionAttempts + 1,
    }))
    
    // …
}

Example Code (JSX):

Only shows errors once the field is blurred or the form has been attempted to submit at least once.

{(field.form.state.submissionAttempts || field.state.meta.isBlurred) && field.state.meta.errors.length ? (
  <em>{field.state.meta.errors.join(',')}</em>
) : null}

Demo:

https://stackblitz.com/edit/wyqmwdxk?file=src%2Findex.tsx

[Balastrong]

That's great, thank you!