Adds AutovalidateMode.onFocusChange to Form and FormField #140962

Mairramer · 2024-01-04T13:07:08Z

This will add a new autovalidateMode to Form and FormField, based on issue #40675.

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

justinmc

The code looks good, but I think we need to make sure this is how we want to architect Flutter's form validation here. @Mairramer have you seen #107350 and the attempt at a PR #120730? I wonder if your motivation is the same and what you think of that approach.

Thank you for the PR by the way. I agree we need to improve the experience with AutovalidateMode.

Mairramer · 2024-01-10T22:56:07Z

@justinmc Thanks! My motivation is similar to the issues referenced. In my case I made some abstractions using FormField and TextEditingController. The code for this PR would eliminate all the abstraction I did. I think it's great to be validated by the architecture team, as it would avoid including code just for ease. Do you think it's better to leave this PR blocked?

justinmc

Sorry for the delay here, really I want to move Form toward a more declarative pattern, but that doesn't seem practical until I can get more time to work on it. In the meantime I think we can go forward with this if we can be very clear about the case that this covers.

What happens if the Form and a FormField have conflicting AutovalidateModes?

packages/flutter/test/widgets/form_test.dart

packages/flutter/lib/src/widgets/form.dart

Mairramer · 2024-02-24T17:20:05Z

@justinmc I'm going to put this PR as a draft. I analyzed this code again and realized that it doesn't work very well. It was not validating correctly in all cases.
I already have a concrete idea about what to do, but I still need to implement it;

Mairramer · 2024-02-27T16:49:06Z

Sorry for the delay here, really I want to move Form toward a more declarative pattern, but that doesn't seem practical until I can get more time to work on it. In the meantime I think we can go forward with this if we can be very clear about the case that this covers.

What happens if the Form and a FormField have conflicting AutovalidateModes?

Validation will be performed first on the FormField and then on the global Form to ensure complete validation.

flutter-dashboard · 2024-02-29T16:54:36Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #140962 at sha 3a34ddb

justinmc

LGTM with a nit 👍

Thanks for your persistence with my slow reviews here! I've been hesitant to change the Form code but I think this is a solid addition now.

packages/flutter/lib/src/widgets/form.dart

packages/flutter/test/widgets/form_test.dart

Renzo-Olivares

LGTM w/ small nits. Thank you for the contribution!

…utter/flutter#140962)

flutter/flutter@77043ba...dba4f77 2024-04-24 [email protected] Fix memory leaks in `BottomNavigationBar` (flutter/flutter#147213) 2024-04-24 [email protected] Disable leak tracking for selection text area (flutter/flutter#147273) 2024-04-24 [email protected] Add missing `overlayColor` property in `styleFrom` methods (flutter/flutter#146685) 2024-04-24 [email protected] Roll Flutter Engine from 3d91141e7e18 to b5d5832f7144 (1 revision) (flutter/flutter#147293) 2024-04-24 [email protected] Roll Flutter Engine from d4f63383d329 to 3d91141e7e18 (1 revision) (flutter/flutter#147281) 2024-04-24 [email protected] Roll Flutter Engine from fcb106011371 to d4f63383d329 (1 revision) (flutter/flutter#147276) 2024-04-24 [email protected] Roll Flutter Engine from 7f89b4367338 to fcb106011371 (1 revision) (flutter/flutter#147272) 2024-04-24 [email protected] Roll Flutter Engine from 9819627013f7 to 7f89b4367338 (2 revisions) (flutter/flutter#147270) 2024-04-24 [email protected] Roll Flutter Engine from d56a231cddc2 to 9819627013f7 (3 revisions) (flutter/flutter#147267) 2024-04-23 [email protected] Roll Flutter Engine from 5f17a779f19d to d56a231cddc2 (1 revision) (flutter/flutter#147266) 2024-04-23 [email protected] Roll Flutter Engine from 303e71890897 to 5f17a779f19d (1 revision) (flutter/flutter#147264) 2024-04-23 [email protected] Remove unneeded local variables and comments in Editable and RenderParagraph (flutter/flutter#146843) 2024-04-23 [email protected] Add test for sliver_animated_opacity.0.dart API example. (flutter/flutter#146722) 2024-04-23 [email protected] Adds AutovalidateMode.onFocusChange to Form and FormField (flutter/flutter#140962) 2024-04-23 [email protected] Roll Flutter Engine from b686508a1dbf to 303e71890897 (4 revisions) (flutter/flutter#147262) 2024-04-23 [email protected] Roll Flutter Engine from f23cc4dda1ad to b686508a1dbf (4 revisions) (flutter/flutter#147258) 2024-04-23 [email protected] Add test for focus_node.0.dart API example. (flutter/flutter#146943) 2024-04-23 [email protected] Roll Flutter Engine from 066953b74042 to f23cc4dda1ad (3 revisions) (flutter/flutter#147255) 2024-04-23 [email protected] Refactor framework + test harness tests (flutter/flutter#146213) 2024-04-23 [email protected] Fix chips delete icon override the default icon size and ignores `IconTheme` from the chip property and `ChipThemeData` (flutter/flutter#146509) 2024-04-23 [email protected] Roll Flutter Engine from f794e6719d3c to 066953b74042 (3 revisions) (flutter/flutter#147248) 2024-04-23 [email protected] Fix frozen `StretchingOverscrollIndicator` animation (flutter/flutter#147195) 2024-04-23 [email protected] Add test for animated_align.0.dart API example. (flutter/flutter#146719) 2024-04-23 [email protected] Fix typos related to Navigator (flutter/flutter#147221) 2024-04-23 [email protected] Fix memory leak in switch painter (flutter/flutter#147228) 2024-04-23 [email protected] Add test for animated_positioned.0.dart API example. (flutter/flutter#146720) 2024-04-23 [email protected] Update icon tree shaker to allow system font fallback (flutter/flutter#147202) 2024-04-23 [email protected] `flutter/lib/src/`: refactoring if-chains into switch expressions (flutter/flutter#146293) 2024-04-23 [email protected] Roll Flutter Engine from 79f49954cce8 to f794e6719d3c (1 revision) (flutter/flutter#147241) 2024-04-23 [email protected] Roll Packages from 01a32c4 to cf6d280 (5 revisions) (flutter/flutter#147240) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Introduced by #140962 <img width="382" alt="Screenshot 2024-04-24 at 9 18 05â�¯AM" src="https://github.com/flutter/flutter/assets/12115586/52d69038-8537-49f3-a7f8-535e59390c5e">

flutter/flutter@77043ba...dba4f77 2024-04-24 [email protected] Fix memory leaks in `BottomNavigationBar` (flutter/flutter#147213) 2024-04-24 [email protected] Disable leak tracking for selection text area (flutter/flutter#147273) 2024-04-24 [email protected] Add missing `overlayColor` property in `styleFrom` methods (flutter/flutter#146685) 2024-04-24 [email protected] Roll Flutter Engine from 3d91141e7e18 to b5d5832f7144 (1 revision) (flutter/flutter#147293) 2024-04-24 [email protected] Roll Flutter Engine from d4f63383d329 to 3d91141e7e18 (1 revision) (flutter/flutter#147281) 2024-04-24 [email protected] Roll Flutter Engine from fcb106011371 to d4f63383d329 (1 revision) (flutter/flutter#147276) 2024-04-24 [email protected] Roll Flutter Engine from 7f89b4367338 to fcb106011371 (1 revision) (flutter/flutter#147272) 2024-04-24 [email protected] Roll Flutter Engine from 9819627013f7 to 7f89b4367338 (2 revisions) (flutter/flutter#147270) 2024-04-24 [email protected] Roll Flutter Engine from d56a231cddc2 to 9819627013f7 (3 revisions) (flutter/flutter#147267) 2024-04-23 [email protected] Roll Flutter Engine from 5f17a779f19d to d56a231cddc2 (1 revision) (flutter/flutter#147266) 2024-04-23 [email protected] Roll Flutter Engine from 303e71890897 to 5f17a779f19d (1 revision) (flutter/flutter#147264) 2024-04-23 [email protected] Remove unneeded local variables and comments in Editable and RenderParagraph (flutter/flutter#146843) 2024-04-23 [email protected] Add test for sliver_animated_opacity.0.dart API example. (flutter/flutter#146722) 2024-04-23 [email protected] Adds AutovalidateMode.onFocusChange to Form and FormField (flutter/flutter#140962) 2024-04-23 [email protected] Roll Flutter Engine from b686508a1dbf to 303e71890897 (4 revisions) (flutter/flutter#147262) 2024-04-23 [email protected] Roll Flutter Engine from f23cc4dda1ad to b686508a1dbf (4 revisions) (flutter/flutter#147258) 2024-04-23 [email protected] Add test for focus_node.0.dart API example. (flutter/flutter#146943) 2024-04-23 [email protected] Roll Flutter Engine from 066953b74042 to f23cc4dda1ad (3 revisions) (flutter/flutter#147255) 2024-04-23 [email protected] Refactor framework + test harness tests (flutter/flutter#146213) 2024-04-23 [email protected] Fix chips delete icon override the default icon size and ignores `IconTheme` from the chip property and `ChipThemeData` (flutter/flutter#146509) 2024-04-23 [email protected] Roll Flutter Engine from f794e6719d3c to 066953b74042 (3 revisions) (flutter/flutter#147248) 2024-04-23 [email protected] Fix frozen `StretchingOverscrollIndicator` animation (flutter/flutter#147195) 2024-04-23 [email protected] Add test for animated_align.0.dart API example. (flutter/flutter#146719) 2024-04-23 [email protected] Fix typos related to Navigator (flutter/flutter#147221) 2024-04-23 [email protected] Fix memory leak in switch painter (flutter/flutter#147228) 2024-04-23 [email protected] Add test for animated_positioned.0.dart API example. (flutter/flutter#146720) 2024-04-23 [email protected] Update icon tree shaker to allow system font fallback (flutter/flutter#147202) 2024-04-23 [email protected] `flutter/lib/src/`: refactoring if-chains into switch expressions (flutter/flutter#146293) 2024-04-23 [email protected] Roll Flutter Engine from 79f49954cce8 to f794e6719d3c (1 revision) (flutter/flutter#147241) 2024-04-23 [email protected] Roll Packages from 01a32c4 to cf6d280 (5 revisions) (flutter/flutter#147240) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…utter/flutter#140962)

cedvdb · 2025-01-20T16:18:47Z

The current implementation of onUnfocus is not that useful. If you type a invalid email and unfocus it will display the error message. So far so good. Then you go back in the input and edit the value, since there is no unfocus event the error message will still be displayed.

From an UX perspective, the user hasn't done anything wrong, he has edited his value and his expectation is (rightly so) that the message should disappear. That is not currently the case.

What should be done:

Mode 1: Display failures on unfocus
With this option the error messages are only shown when unfocussing
Mode 2: Display failures after a delay
With this option the error message is shown after a delay (eg: 1 second).

justinmc · 2025-01-24T21:04:00Z

Good point @cedvdb. I think in the long term really what we need here is the ability to validate at arbitrary times instead of the AutovalidateMode enum.

itsUndefined · 2025-04-14T11:56:45Z

How can I implement the behavior that @cedvdb described? This is probably a very common requirement for heavy forms.

cedvdb · 2025-11-05T17:35:20Z

@itsUndefined @justinmc

I created an issue for the delayed proposal #178061

I know you'd prefer user defined validation modes, but although good, seems a bit overkill. A sensible default should be here in the enum.

Adds AutovalidateMode.onFocusChange to Form and FormField

a95c4da

github-actions bot added the framework flutter/packages/flutter repository. See also f: labels. label Jan 4, 2024

HansMuller requested a review from justinmc January 5, 2024 22:42

Merge branch 'master' into feature/adds-autovalidate-onfocuschange

83f8d95

justinmc reviewed Jan 10, 2024

View reviewed changes

Merge branch 'master' into feature/adds-autovalidate-onfocuschange

70a2956

justinmc reviewed Feb 21, 2024

View reviewed changes

Merge branch 'master' into feature/adds-autovalidate-onfocuschange

d87bedb

Mairramer marked this pull request as draft February 24, 2024 17:20

Mairramer added 2 commits February 27, 2024 12:24

improves

453218a

fix

fdf0b96

Mairramer marked this pull request as ready for review February 27, 2024 15:27

Mairramer requested a review from justinmc February 27, 2024 15:29

fix space

908f491

Mairramer and others added 11 commits February 27, 2024 13:52

improve test

241ac9b

improve

b1df96a

fix space

f7943f3

refactor

ca2a1b4

Merge branch 'master' into feature/adds-autovalidate-onfocuschange

9bca924

fix imports

e778002

fix

7484607

fix space

2464040

fix

d090cdf

fix

98a8ca3

fix

3a34ddb

flutter-dashboard bot added the will affect goldens Changes to golden files label Feb 29, 2024

Mairramer requested a review from justinmc April 16, 2024 00:08

justinmc approved these changes Apr 16, 2024

View reviewed changes

packages/flutter/lib/src/widgets/form.dart Outdated Show resolved Hide resolved

justinmc requested a review from Renzo-Olivares April 16, 2024 17:00

added inline statement

aaa3e70

Renzo-Olivares reviewed Apr 16, 2024

View reviewed changes

packages/flutter/lib/src/widgets/form.dart Outdated Show resolved Hide resolved

Renzo-Olivares reviewed Apr 16, 2024

View reviewed changes

packages/flutter/lib/src/widgets/form.dart Show resolved Hide resolved

improve

50ed58b

Renzo-Olivares reviewed Apr 16, 2024

View reviewed changes

packages/flutter/test/widgets/form_test.dart Outdated Show resolved Hide resolved

Renzo-Olivares approved these changes Apr 16, 2024

View reviewed changes

fix

4609c42

Renzo-Olivares added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 23, 2024

auto-submit bot merged commit 790ce64 into flutter:master Apr 23, 2024

engine-flutter-autoroll mentioned this pull request Apr 24, 2024

Roll Flutter from 77043bae1a5e to fa85f69e47d8 (28 revisions) flutter/packages#6604

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 24, 2024

790ce64 Adds AutovalidateMode.onFocusChange to Form and FormField (fl…

99e6623

…utter/flutter#140962)

polina-c mentioned this pull request Apr 24, 2024

Clean up leaks in a test. #147312

Merged

engine-flutter-autoroll mentioned this pull request Apr 24, 2024

Roll Flutter from 77043bae1a5e to 2676c84a90d2 (29 revisions) flutter/packages#6606

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 24, 2024

790ce64 Adds AutovalidateMode.onFocusChange to Form and FormField (fl…

ef06030

…utter/flutter#140962)

engine-flutter-autoroll mentioned this pull request Apr 24, 2024

Roll Flutter from 77043bae1a5e to dba4f7747441 (30 revisions) flutter/packages#6607

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 24, 2024

790ce64 Adds AutovalidateMode.onFocusChange to Form and FormField (fl…

e638878

…utter/flutter#140962)

HansMuller mentioned this pull request Apr 26, 2024

Flutter Framework Team: Notable Commits #121415

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 6, 2024

790ce64 Adds AutovalidateMode.onFocusChange to Form and FormField (fl…

59ee119

…utter/flutter#140962)

Mairramer mentioned this pull request Oct 23, 2024

Fixes initial validation with AutovalidateMode.always on first build #156708

Merged

9 tasks

Adds AutovalidateMode.onFocusChange to Form and FormField #140962

Adds AutovalidateMode.onFocusChange to Form and FormField #140962

Uh oh!

Conversation

Mairramer commented Jan 4, 2024

Pre-launch Checklist

Uh oh!

justinmc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mairramer commented Jan 10, 2024

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Mairramer commented Feb 24, 2024

Uh oh!

Mairramer commented Feb 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

flutter-dashboard bot commented Feb 29, 2024

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Renzo-Olivares left a comment

Choose a reason for hiding this comment

Uh oh!

cedvdb commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinmc commented Jan 24, 2025

Uh oh!

itsUndefined commented Apr 14, 2025

Uh oh!

cedvdb commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

justinmc left a comment •

edited

Loading

Mairramer commented Feb 27, 2024 •

edited

Loading

cedvdb commented Jan 20, 2025 •

edited

Loading

cedvdb commented Nov 5, 2025 •

edited

Loading