flutter_form_builder icon indicating copy to clipboard operation
flutter_form_builder copied to clipboard
verified publisher icon flutter-form-builder-ecosystem

[General]: FormField gains `focus` back after a modal/dialog is closed

Open mhmzdev opened this issue 1 year ago • 7 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Package/Plugin version

9.3.0 <Tried on latest 9.4.1 as well>

Platforms

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

Flutter doctor

Flutter doctor 
[✓] Flutter (Channel stable, 3.24.0, on macOS 14.6.1 23G93 darwin-arm64, locale en-PK)
    • Flutter version 3.24.0 on channel stable at /Users/hamza/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 80c2e84975 (7 weeks ago), 2024-07-30 23:06:49 +0700
    • Engine revision b8800d88be
    • Dart version 3.5.0
    • DevTools version 2.37.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/hamza/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/hamza/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/hamza/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.14.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)

[✓] VS Code (version 1.92.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.96.0

[✓] Connected device (4 available)
    • iPhone 15 Pro (mobile)          • 2DFED524-E171-445E-B631-828D239B1B43 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-5 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 14.6.1 23G93 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 14.6.1 23G93 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 128.0.6613.138

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Minimal code example

Code sample 
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.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 MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FormBuilder(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FormBuilderTextField(
              name: 'full_name',
              decoration: const InputDecoration(labelText: 'Full Name'),
              validator: FormBuilderValidators.compose([
                FormBuilderValidators.required(),
              ]),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                final isValid = _formKey.currentState!.saveAndValidate();
                if (!isValid) return;
                FocusScope.of(context).unfocus();

                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      title: const Text('Form Data'),
                      content: Text(_formKey.currentState!.value.toString()),
                      actions: [
                        TextButton(
                          onPressed: () => Navigator.of(context).pop(),
                          child: const Text('Close'),
                        ),
                      ],
                    );
                  },
                );
              },
              child: const Text('Open Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

Current Behavior

When any text field is tap to enter some value, and any dialog or modal is opened with the field still in focus. When the dialog exit the focus goes back to the text field. Which is weird, it shouldn't happen.

I've already tried the FocusScope.of(context).unfocus() call before opening the keyboard but doesn't work.

Expected Behavior

When a text field is in focus and any dialog or modal is opened, the field should lose its focus i.e. unfocus and shouldn't gain focus back after the modal or dialog is closed.

Steps To Reproduce

  1. Create a simple text field using the package
  2. Tap it and enter some value
  3. Create a very simple modal or dialog
  4. Open the modal/dialog without unfocusing the text field.
  5. Once the modal/dialog exit, the field will gain its focus back

FYI: This won't happen if you unfocus the field yourself i.e. tap on the screen or the "done" button on keyboard.

Aditional information

It only happens if the text field has gained its focus one time, if you don't tap the field, it won't gain its focus on closing of modal or dialog.

mhmzdev avatar Sep 19 '24 04:09 mhmzdev

Hi! I need a minimal code example to can execute:

  • Without external packages and dependencies
  • Without refereces of imports
  • With only Flutter Material or Cupertino widgets and FormBuilder widgets
  • Starting from main Dart method

Example:

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.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 MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FormBuilder(
        key: _formKey,
        child: Column(
          children: [
            FormBuilderTextField(
              name: 'full_name',
              decoration: const InputDecoration(labelText: 'Full Name'),
              validator: FormBuilderValidators.compose([
                FormBuilderValidators.required(),
              ]),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _formKey.currentState?.saveAndValidate();
                debugPrint(_formKey.currentState?.value.toString());
              },
              child: const Text('Print'),
            )
          ],
        ),
      ),
    );
  }
}

Thanks a lot

deandreamatias avatar Dec 26 '24 16:12 deandreamatias

Hi @deandreamatias I've updated your code with reproducible example, you can copy paste it directly

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.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 MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FormBuilder(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FormBuilderTextField(
              name: 'full_name',
              decoration: const InputDecoration(labelText: 'Full Name'),
              validator: FormBuilderValidators.compose([
                FormBuilderValidators.required(),
              ]),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                final isValid = _formKey.currentState!.saveAndValidate();
                if (!isValid) return;
                FocusScope.of(context).unfocus();

                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      title: const Text('Form Data'),
                      content: Text(_formKey.currentState!.value.toString()),
                      actions: [
                        TextButton(
                          onPressed: () => Navigator.of(context).pop(),
                          child: const Text('Close'),
                        ),
                      ],
                    );
                  },
                );
              },
              child: const Text('Open Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

Results:

https://github.com/user-attachments/assets/cde9c62b-9efe-4d09-bf01-2c63e83c3d5f

mhmzdev avatar Dec 30 '24 15:12 mhmzdev

Related to #1297

deandreamatias avatar Dec 31 '24 11:12 deandreamatias

I can replicate this error with Flutter pure components, so this bug maybe is a behavior of Flutter SDK.

Form(
  child: TextFormField(
      decoration: InputDecoration(labelText: "Full name"),
      validator: FormBuilderValidators.compose([
        FormBuilderValidators.required(),
        FormBuilderValidators.minLength(1)
      ]),
    ),
)

Related to https://github.com/flutter/flutter/issues/153079, https://github.com/flutter/flutter/issues/92349 and https://github.com/flutter/flutter/issues/145155

I think that would exist a way to skip this behavior, but can't think a some way right now

deandreamatias avatar Jan 01 '25 17:01 deandreamatias

Probably we can open an issue on Flutter SDK itself? @deandreamatias

mhmzdev avatar Jan 02 '25 10:01 mhmzdev

I think that the best way is follow the https://github.com/flutter/flutter/issues/153079 issue and when Flutter team solve this, we try again if our use cases are solved. This and there issue is the same, I think

deandreamatias avatar Jan 02 '25 10:01 deandreamatias

solution:

Image

ahyangnb avatar Mar 18 '25 08:03 ahyangnb