AutovalidateMode.onUserInteraction: Is it possible to add a feature that prevents automatic focus on a field when it contains an error?

[quochuyR]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.5.0

What you'd like to happen

When using AutovalidateMode.onUserInteraction, I encountered an issue where FormBuilderTextField automatically receives focus when interacting with other fields, such as selecting a date from FormBuilderDateTimePicker or choosing an option from FormBuilderDropdown. This causes the keyboard to open unexpectedly when working with picker fields. Additionally, when a TextField with an error is focused, I’m unable to unfocus it using FocusManager.instance.primaryFocus?.unfocus() because it keeps refocusing and reopening the keyboard.

Alternatives you've considered

At the moment, I'm using AutovalidateMode.disabled as a temporary solution.

Aditional information

No response

[deandreamatias]

Related this #1392, #1364, #1304 and discussion #1297

Maybe can close this issue and add comments on some related

[quochuyR]

@deandreamatias I'm not sure it fully aligns with the issues mentioned above.

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 MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FormScreen(),
    );
  }
}


class FormScreen extends StatefulWidget {

  const FormScreen({super.key});

  @override
  State<FormScreen> createState() => _FormScreenState();
}

class _FormScreenState extends State<FormScreen> {
 final GlobalKey<FormBuilderState> _formBuilderKey = GlobalKey<FormBuilderState>();
 Map<String, dynamic> _masterData = {};

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Form Builder Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: FormBuilder(
                key: _formBuilderKey,
                initialValue: _masterData,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        ElevatedButton(
                          style: ButtonStyle(shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)))),
                          onPressed: () {
                            FocusScope.of(context).unfocus();
                          },
                          child: const Text('Unfocus'),
                        ),
                        SizedBox(width: 10.0,),
                        // Submit button
                        ElevatedButton(
                          style: ButtonStyle(shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)))),
                          onPressed: () {
                            _formBuilderKey.currentState?.saveAndValidate();
                          },
                          child: const Text('Submit'),
                        ),
                      ],
                    ),
                    // DropdownButton field
                    FormBuilderDropdown<String>(
                      name: 'dropdown',
                      decoration: const InputDecoration(
                        labelText: 'Select an option',
                      ),
                      items: const [
                        DropdownMenuItem(value: 'Option 1', child: Text('Option 1')),
                        DropdownMenuItem(value: 'Option 2', child: Text('Option 2')),
                        DropdownMenuItem(value: 'Option 3', child: Text('Option 3')),
                      ],
                      validator: FormBuilderValidators.required(),
                    ),
                    const SizedBox(height: 20),
                    
                    // TextField 1
                    FormBuilderTextField(
                      name: 'textfield1',
                      decoration: const InputDecoration(
                        labelText: 'Enter text 1',
                      ),
                      validator: FormBuilderValidators.required(),
                    ),
                    const SizedBox(height: 20),
                    
                   
                    
                    // DateTimePicker 1
                    FormBuilderDateTimePicker(
                      name: 'datetime1',
                      decoration: const InputDecoration(
                        labelText: 'Pick a date 1',
                      ),
                      initialDatePickerMode: DatePickerMode.day,
                      validator: FormBuilderValidators.required(),
                    ),
                    const SizedBox(height: 20),
                    
                    // DateTimePicker 2
                    FormBuilderDateTimePicker(
                      name: 'datetime2',
                      decoration: const InputDecoration(
                        labelText: 'Pick a date 2',
                      ),
                      initialDatePickerMode: DatePickerMode.day,
                      // validator: FormBuilderValidators.required(),
                    ),
                    const SizedBox(height: 20),
                    
                    
                  ],
                ),
              ),
        ),
      ),
    );
  }
}

In the first case

Unable to unfocus the textfield and the keyboard cannot be closed

case1.mp4

In case 2

FormBuilderDateTimePicker opens automatically and cannot be canceled.

case2.mp4