Closed
Description
Is there an existing issue for this?
- I have searched the existing issues
Package/Plugin version
9.7.0
Platforms
- AndroidiOSLinuxMacOSWebWindows
Flutter doctor
Flutter doctor
[✓] Flutter (Channel stable, 3.27.1, on macOS 14.6.1 23G93 darwin-arm64, locale
en-MY)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.96.2)
[✓] Connected device (4 available)
[✓] Network resources
• No issues found!
Minimal code example
Code sample
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
void main() {
runApp(const FlutterExample());
}
class FlutterExample extends StatelessWidget {
const FlutterExample({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TheForm(),
),
);
},
child: const Text('Go to Next Page'),
),
),
);
}
}
class TheForm extends StatefulWidget {
const TheForm({super.key});
@override
State<TheForm> createState() => _TheFormState();
}
class _TheFormState extends State<TheForm> {
final _formKey = GlobalKey<FormBuilderState>();
bool _isValid = false;
InputDecoration _defaultInputDecoration(String placeholder) =>
InputDecoration(labelText: placeholder);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Form Page'),
),
body: SafeArea(
child: FormBuilder(
key: _formKey,
onChanged: () {
setState(() {
_isValid = _formKey.currentState!.isValid;
});
},
child: Column(
children: [
FormBuilderTextField(
name: 'name',
decoration: _defaultInputDecoration('Name'),
validator: FormBuilderValidators.required(),
autovalidateMode: AutovalidateMode.always,
),
FormBuilderTextField(
name: 'email',
decoration: _defaultInputDecoration('E-Mail'),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(),
FormBuilderValidators.email(),
]),
autovalidateMode: AutovalidateMode.always,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(_isValid ? 'Form is valid' : 'Form is not valid'),
),
],
),
),
),
);
}
}
Current Behavior
When set autovalidateMode: AutovalidateMode.always
, the last field will be focus when enter the page which unexpected and logically weird.
Expected Behavior
When set autovalidateMode: AutovalidateMode.always
, the first required field being focus when enter the page.
But the best, is allowing user to pass in whether to focus the field when it sets to required.
As the validate provides the control of focusOnInvalid
which we can back to previous behaviour.
Steps To Reproduce
- run the code and able to see a home page with button
- press the button to next page.
- last field (email) being focus, but not the first.
- Based on previous behaviour (upgraded from 7.8.0), it won't focus the field when entering page.
Aditional information
issue_formBuilder.mov
From the video, shows what is not expecting.
Activity
DarenF-20C commentedon Jan 6, 2025
@deandreamatias, Can you help to take a look on this?
deandreamatias commentedon Jan 6, 2025
Hi!
I can replicated this issue.
Is related with other issues with AutoValidateMode and also with focus problems.
I will close this PR #1453 and after that, I will work in a new PR that solve all issues with AutoValidateMode.
Can follow the discussion on #1458
DarenF-20C commentedon Jan 7, 2025
Thanks for bringing this up, and I really appreciate your quick response and fixes.
For the moment, is there any possible workaround for the current focus issue? As I know for abnormal focus issue, putting the
autovalidatemode
in each field instead ofFormBuilder
solves it as a workaround.deandreamatias commentedon Jan 7, 2025
Maybe a way is set a key on a first field that have validator and force the focus when load the Form.
Some like that:
[-][General]: `AutovalidateMode.always` shouldn't focus field at initial[/-][+][General]: `AutovalidateMode.always` shouldn't focus to first field[/+]deandreamatias commentedon Jan 8, 2025
@DarenF-20C the solution that I working is that not focus at all (#1460). Only validate all fields and show errors, but not focus on any field.
If want focus in any field, can force with keys.
With a field key
or with a form key
What do you thing? Is good enogth?
DarenF-20C commentedon Jan 9, 2025
Yes! That solves my issue. Is it going to be release soon?
DarenF-20C commentedon Jan 9, 2025
I’ve checked the changes and tested them, and they align with the expected default behaviour of
AutovalidateMode.always
:If focus needed, may use validate() or manually focus on a field to adjust this behaviour.
deandreamatias commentedon Jan 9, 2025
So, I think that you tested the changes on PR branch (feature/1458-improve-autovalidate-modes) right?
The estimated release date for this version is 1 week max.
I want to work on other improvements for the autovalidate mode to make it more robust.
It will be released first as a prerelease, on 10.0.0-dev.2
I don't have a release date for 10.0.0 as stable, because it's a big change and I want to check everything to avoid inconvenience to users, even though it is a breaking change
DarenF-20C commentedon Jan 10, 2025
Yeah I tested on that PR to check the behaviour, the PR mets what I need. 🥂 🎉
Sure. Would like to have the fix on dev.2 first. Really appreciate your help on this issue. 🙏
DarenF-20C commentedon Jan 13, 2025
Hi, Kindly follow up if the dev.2 release able to roll out soon. 👍
deandreamatias commentedon Jan 13, 2025
Generated https://pub.dev/packages/flutter_form_builder/versions/10.0.0-dev.2