Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
quochuyR opened this issue Dec 24, 2024 · 8 comments
Labels
enhancement New feature or request

Comments

@quochuyR
Copy link

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

@quochuyR quochuyR added the enhancement New feature or request label Dec 24, 2024
@deandreamatias
Copy link
Collaborator

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

Maybe can close this issue and add comments on some related

@quochuyR
Copy link
Author

@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

@deandreamatias
Copy link
Collaborator

deandreamatias commented Jan 5, 2025

Hi!
The case 2, will be solved with this PR #1453
I will take a look in case 1, that maybe is related

@deandreamatias
Copy link
Collaborator

The case 1 is partially solved by improve focus on #1453, but need to made some changes. Follow this dicussion for more info #1458

@deandreamatias
Copy link
Collaborator

Hi @quochuyR
You can open a new bug issue type with details of case 1?
Can use the same minimal code example, but I really need the exactly steps to reproduce the bug. Also, use the version 10.0.0-dev.1
Thanks a lot

I will close this issue because is too messy know what is what

@deandreamatias deandreamatias added the awaiting author response Waiting for author of issue to respond with more info label Jan 7, 2025
@quochuyR
Copy link
Author

quochuyR commented Jan 9, 2025

Hi @deandreamatias,

Thank you for the guidance. I will open a new bug issue for case 1 with the exact steps to reproduce the bug, using the same minimal code example and version 10.0.0-dev.1 as requested.

Thanks again for your support!

@deandreamatias deandreamatias removed the awaiting author response Waiting for author of issue to respond with more info label Jan 9, 2025
@quochuyR
Copy link
Author

Hi @deandreamatias,
Currently, the two issues mentioned earlier no longer appear in version 10.0.0-dev.1. However, I have discovered two new issues related to the focus behavior of FormBuilderTextField.
I have created issue #1462 to provide a detailed description of these issues.
I will close this issue now.
Thank you!

@deandreamatias
Copy link
Collaborator

Thanks @quochuyR !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants