flutter_form_builder icon indicating copy to clipboard operation
flutter_form_builder copied to clipboard

[General]: Validation focuses latest invalid field instead of first

Open uragecz opened this issue 1 year ago • 2 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Package/Plugin version

9.2.1

Platforms

  • [X] Android
  • [X] iOS
  • [ ] Linux
  • [ ] MacOS
  • [ ] Web
  • [ ] Windows

Flutter doctor

Flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.8, on macOS 14.4.1 23E224 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.89.1)
[✓] Connected device (4 available)            
[✓] Network resources

• No issues found!

Minimal code example

Code sample
  final _formKey = GlobalKey<FormState>();
  
   Widget build(BuildContext context) {
   return(Column(children: [
Form(key: _formKey, child: Column(children: [
      FormBuilderTextField(
        name: 'firstname',
        autovalidateMode: AutovalidateMode.onUserInteraction,
        initialValue: '',
        onChanged: (text) {},
        validator: (value) {
            return 'Required';
        },
      ),
       SizedBox(height: 30, width: 30),
      FormBuilderTextField(
        name: "lastname",
        autovalidateMode: AutovalidateMode.onUserInteraction,
        initialValue: '',
        onChanged: (text) {},
        validator: (value) {
            return 'Required';
        },
      ),
       SizedBox(height: 30, width: 30),
      FormBuilderDateTimePicker(
        name: "date_of_birthday",
        autovalidateMode: AutovalidateMode.onUserInteraction,
        inputType: InputType.date
        initialDate: DateTime(DateTime.now().year - 30, 1, 1),
        onChanged: (text) {},
        validator: (value) {
            return 'Required';
        },
      )
 ]), 
 TextButton(onPressed: () {_formKey.currentState?.validate() },child: Text('Submit'))
 ]));

Current Behavior

I have form with many FormBuilderTextFields, and some of them are required - (they have validator that checks if its value empty or not), when i am trying to submit the form, calling validation - _formKey.currentState?.validate(), the latest invalid FormField is being focused instead of first one. In my case the latest is FormBuilderDateTimePicker, so when i pres "Submit", the date picker is being opened.

Expected Behavior

After validation, the first invalid Field in the tree should be focused.

Steps To Reproduce

Aditional information

I suppose this is not desired behaviour, but if from some unknown reason that i haven't found this is wanted. Is there at least some way to prevent date picker from opening its picker / dialog ?

I also think that this issue is related to this - https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/issues/1253, where the focused were jumped to the latest input despite there were also another invalid input above No response

uragecz avatar May 16 '24 11:05 uragecz

Related with https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/discussions/1297

deandreamatias avatar Aug 18 '24 08:08 deandreamatias

The solution at #1253 is still valid. I tried several things like unfocusing via a delayed future, nothing works except for that solution. uncomment or remove autovalidateMode: AutovalidateMode.always, at the field and random focussing on fields is gone.

jeejeestudio avatar Sep 01 '24 13:09 jeejeestudio

I can't reproduce this bug with the code sample. In the code example it says that the widget used is Form (native of Flutter) and not FormBuilder. Maybe that is the error. Try to use this to encompass the FormBuilder form fields:

final GlobalKey<FormBuilderState> _formKey = GlobalKey<FormBuilderState>();
FormBuilder(...)

deandreamatias avatar Jan 01 '25 16:01 deandreamatias

@deandreamatias that was it... When i changed it to FormBuilderState it started working and started focusing from the top. Thank you a lot and sorry, now it seemed to me like this issue belonged to stackoverflow since it was a bug in my code. I am closing the issue

uragecz avatar Jan 06 '25 10:01 uragecz