feat(core): add field listeners #1032

harry-whorlow · 2024-11-22T14:08:34Z

Background

From discussion #709 and PR #801

A continuation of the PR #801 that been sitting stale since July, as per the previous pull request:

Sometimes we may want to attach our own side effects to the field when some event happens. 
For example, resetting another field if some field value has changed.

Attaching these 'listeners' inside the validator does not work as intended, because validator 
does not guarantee if it was triggered by the exact event. 
(eg. all validators run when form submits)

It's of course possible to implement, but it's not very clean and the concerns become scattered.

The PR was given the go ahead by @crutchcorn here.

This is something we would really like to have, as I'm currently experiencing a minor blocker with this functionality missing, and I would prefer to have a clear api as opposed to using the current validators onChange workaround.

Continuation of work

rebased to current main
removed onHandleChange listener & tests
add onBlur listener & tests
add onSubmit tests (need guidance on functionality)

Guidance wanted

Specifically referring to the onSubmit comment made here

Is there a method that I've missed for an "on submit" callback that I can use to set the listeners value inside the FiledApi when the form is submitted? or is this something I need to create and pass down from the form to the field? Just a hint in the correct direction would be really appreciated.

Feel free to fire off any questions, I'll do my best to get back to you in a timely manner.

Looking forward to hearing from the maintainers 🤟

Functionality	Tests	Docs
[x] onChange	[x] onChange	[ ] doc structure
[x] onBlur	[x] onBlur	[ ] React
[x] onMount	[x] onMount	[ ] Vue
[x] onSubmit	[x] onSubmit	[ ] Anngular

packages/form-core/tests/FieldApi.spec.ts

packages/form-core/src/FormApi.ts

harry-whorlow · 2024-11-22T15:39:55Z

Moved the onSubmit test from FieldApi.spec.ts -> FormApi.spec.ts

nx-cloud · 2024-11-22T17:31:13Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit dba1652. 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.

pkg-pr-new · 2024-11-22T17:34:18Z

Open in Stackblitz

More templates

@tanstack/angular-form

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

@tanstack/react-form

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

@tanstack/solid-form

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

@tanstack/valibot-form-adapter

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

@tanstack/vue-form

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

@tanstack/yup-form-adapter

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

@tanstack/zod-form-adapter

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

@tanstack/form-core

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

@tanstack/lit-form

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

commit: dba1652

codecov · 2024-11-22T17:36:14Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.06%. Comparing base (c8e9887) to head (e07a05b).
Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1032      +/-   ##
==========================================
+ Coverage   85.70%   86.06%   +0.36%     
==========================================
  Files          28       28              
  Lines        1098     1105       +7     
  Branches      275      275              
==========================================
+ Hits          941      951      +10     
+ Misses        144      141       -3     
  Partials       13       13

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

🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

Balastrong

Fantastic PR, very well done! :D

I think you can tick the onSubmit box and go ahead with the docs.

packages/form-core/src/FieldApi.ts

packages/form-core/src/FormApi.ts

harry-whorlow · 2024-11-22T18:40:09Z

With regards to your comment, I would say yes unless you have a leaning in a different direction... But, I'm completely open to suggestions.

packages/form-core/src/FieldApi.ts

harry-whorlow · 2024-11-22T20:25:48Z

@Balastrong hot off the press with a first draft for the docs, let me know what you think.

Once I get the thumbs up I'll create the Vue and Angular docs. Feel free to offer improvements and tweaks 🤟

packages/form-core/src/FormApi.ts

packages/form-core/tests/FormApi.spec.ts

packages/form-core/src/FieldApi.ts

docs/framework/react/guides/listeners.md

docs/framework/react/guides/basic-concepts.md

harry-whorlow · 2024-11-23T14:11:58Z

@Balastrong, let me know what you think! if everything looks good I'll finish the Vue and Angular when I get back tonight. Enjoy the weekend!🤟

ha1fstack · 2024-11-23T16:34:42Z

Thank you for following up the original PR 👏

Balastrong

Sorry I'm looking at all the tiny details now, but everything else looks really great :)

Please go ahead with the docs for the other frameworks and I think we're good to go!

docs/framework/react/guides/basic-concepts.md

docs/framework/react/guides/listeners.md

harry-whorlow · 2024-11-24T16:25:59Z

@Balastrong no please, nitpick away... I'll be the poor sod using it 😂

harry-whorlow · 2024-11-24T19:18:27Z

@Balastrong would it be okay to close out this pull request, and leave the angular docs up to the community... It's been a few years since I did angular and most of the documentation is missing from tanstack/form, so its not like I have a reference to compare against.

I'll give it a go in the mean time, but if I can't get it, I'll create an issue for it once this is merged. 🤟

[edit] ah, I gave it a go... please double check it though as I'm not the Angular savant

Balastrong

Angular was missing an explicit Input definition to expose listeners, I added it now.
Also on the docs I realized we don't have yet the ability to reset a single field, so you either form.reset({...form.state.value, field: ''}) or form.setFieldValue('field', '').

Everything else looks good, thank you so much for the PR and all the fixes!

harry-whorlow · 2024-11-25T21:03:57Z

Thanks man! it's been a pleasure working with you.

ha1fstack and others added 2 commits November 21, 2024 12:26

feat: add field listeners

2aa4316

feat: add onBlur listener

ebcdf83

harry-whorlow commented Nov 22, 2024

View reviewed changes

packages/form-core/tests/FieldApi.spec.ts Outdated Show resolved Hide resolved

harry-whorlow force-pushed the listener branch from 72b762b to b154b29 Compare November 22, 2024 15:34

harry-whorlow commented Nov 22, 2024

View reviewed changes

packages/form-core/src/FormApi.ts Outdated Show resolved Hide resolved

feat: add onSubmit listener

e1716e0

harry-whorlow force-pushed the listener branch from b154b29 to e1716e0 Compare November 22, 2024 15:38

ci: apply automated fixes and generate docs

da975e5

Balastrong reviewed Nov 22, 2024

View reviewed changes

packages/form-core/src/FieldApi.ts Outdated Show resolved Hide resolved

packages/form-core/src/FormApi.ts Outdated Show resolved Hide resolved

harry-whorlow commented Nov 22, 2024

View reviewed changes

packages/form-core/src/FieldApi.ts Outdated Show resolved Hide resolved

fix: stop onChange triggering onMount and add tests to assert this

79d1dad

harry-whorlow force-pushed the listener branch from a0534b5 to 79d1dad Compare November 22, 2024 20:10

feat: add listeners react documentation

a88f993

harry-whorlow force-pushed the listener branch from 50c19b5 to a88f993 Compare November 22, 2024 20:33

Balastrong reviewed Nov 23, 2024

View reviewed changes

fix: pull request comments

084e8da

Balastrong reviewed Nov 24, 2024

View reviewed changes

docs/framework/react/guides/basic-concepts.md Outdated Show resolved Hide resolved

docs/framework/react/guides/listeners.md Outdated Show resolved Hide resolved

ci: apply automated fixes and generate docs

a0dd15c

Harry Whorlow added 2 commits November 24, 2024 17:29

fix: pull request comments

78811fb

feat: Vue docs

42d1a73

Harry Whorlow and others added 5 commits November 24, 2024 20:33

feat: Angular docs

e07a05b

feat: expose listeners on anguar wrapper and update docs

1ce3541

docs: fix react

95d6815

docs: fix vue

bc86f5e

ci: apply automated fixes and generate docs

dba1652

Balastrong approved these changes Nov 25, 2024

View reviewed changes

Balastrong merged commit 6968cfd into TanStack:main Nov 25, 2024
5 checks passed

Balastrong mentioned this pull request Nov 26, 2024

feat(core): add field listeners #801

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(core): add field listeners #1032

feat(core): add field listeners #1032

harry-whorlow commented Nov 22, 2024 •

edited

Loading

harry-whorlow commented Nov 22, 2024

nx-cloud bot commented Nov 22, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 22, 2024 •

edited

Loading

codecov bot commented Nov 22, 2024 •

edited

Loading

Balastrong left a comment

harry-whorlow commented Nov 22, 2024 •

edited

Loading

harry-whorlow commented Nov 22, 2024

harry-whorlow commented Nov 23, 2024

ha1fstack commented Nov 23, 2024

Balastrong left a comment

harry-whorlow commented Nov 24, 2024

harry-whorlow commented Nov 24, 2024 •

edited

Loading

Balastrong left a comment •

edited

Loading

harry-whorlow commented Nov 25, 2024

feat(core): add field listeners #1032

feat(core): add field listeners #1032

Conversation

harry-whorlow commented Nov 22, 2024 • edited Loading

harry-whorlow commented Nov 22, 2024

nx-cloud bot commented Nov 22, 2024 • edited Loading

☁️ Nx Cloud Report

pkg-pr-new bot commented Nov 22, 2024 • edited Loading

codecov bot commented Nov 22, 2024 • edited Loading

Codecov Report

Balastrong left a comment

Choose a reason for hiding this comment

harry-whorlow commented Nov 22, 2024 • edited Loading

harry-whorlow commented Nov 22, 2024

harry-whorlow commented Nov 23, 2024

ha1fstack commented Nov 23, 2024

Balastrong left a comment

Choose a reason for hiding this comment

harry-whorlow commented Nov 24, 2024

harry-whorlow commented Nov 24, 2024 • edited Loading

Balastrong left a comment • edited Loading

Choose a reason for hiding this comment

harry-whorlow commented Nov 25, 2024

harry-whorlow commented Nov 22, 2024 •

edited

Loading

nx-cloud bot commented Nov 22, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 22, 2024 •

edited

Loading

codecov bot commented Nov 22, 2024 •

edited

Loading

harry-whorlow commented Nov 22, 2024 •

edited

Loading

harry-whorlow commented Nov 24, 2024 •

edited

Loading

Balastrong left a comment •

edited

Loading