Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: set fields to isBlurred only after field blur event #940

Merged
merged 2 commits into from
Dec 17, 2024

Conversation

Pascalmh
Copy link
Contributor

@Pascalmh Pascalmh commented Sep 5, 2024

this is a followup for #939

Copy link

nx-cloud bot commented Sep 5, 2024

☁️ 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

Sent with 💌 from NxCloud.

Copy link

pkg-pr-new bot commented Sep 5, 2024

Open in Stackblitz

More templates

@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

Copy link

codecov bot commented Sep 5, 2024

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.

Copy link
Member

@crutchcorn crutchcorn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment for change required

@Pascalmh Pascalmh requested a review from crutchcorn October 28, 2024 09:54
@Pascalmh Pascalmh marked this pull request as draft November 7, 2024 12:53
@Pascalmh Pascalmh marked this pull request as ready for review November 7, 2024 13:33
@Pascalmh Pascalmh force-pushed the fix-isBlurred branch 2 times, most recently from fe63182 to 6db0a30 Compare November 7, 2024 13:58
@Pascalmh Pascalmh closed this Nov 26, 2024
@Pascalmh Pascalmh reopened this Nov 26, 2024
@Pascalmh
Copy link
Contributor Author

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

@Pascalmh
Copy link
Contributor Author

@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

@Pascalmh Pascalmh requested a review from Balastrong December 17, 2024 07:49
Copy link
Member

@Balastrong Balastrong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's great, thank you!

@Balastrong Balastrong changed the title fix: only set fields to isBlurred after field blur or form submit fix: set fields to isBlurred only after field blur event Dec 17, 2024
@Balastrong Balastrong merged commit 1f043e9 into TanStack:main Dec 17, 2024
7 checks passed
@Pascalmh Pascalmh deleted the fix-isBlurred branch December 17, 2024 09:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants