[FormBuilderTextField]: Keyboard closes immediately when using FormBuilderTextField in Flutter Web 3.29.0

[dorklein]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

10.0.0

Platforms

• Android
• iOS
• Linux
• MacOS
• Web
• Windows

Flutter doctor

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.2, on macOS 15.3.1 24D70 darwin-arm64, locale en-IL)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.3)
[✓] Connected device (3 available)
[✓] Network resources

Minimal code example

Code sample

FormBuilderTextField(
    name: 'name',
    controller: controller,
    decoration: InputDecoration(
      labelText: 'Name',
    ),
  );

Current Behavior

When running in web mobile, when tapping on the field, it doesn't allow to focus or open the keyboard. (listening to the focus node it shows gaining focus for a split second and being unfocused immediately).

It also doesn't work with autofocus: true.

The same Issue happens when using TextFormField. But the issue does not exists when using TextField.

Expected Behavior

The field should receive focus when tapped.

Steps To Reproduce

Run any flutter app in web on mobile devices (or emulator)

flutter run -d web-server --web-port <PORT> --web-hostname 0.0.0.0 

# proxy to the emulator or device
adb reverse tcp:<PORT> tcp:<PORT>

open localhost:<PORT> in the mobile device browser.

Aditional information

No response

[deandreamatias]

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]

Related with flutter/flutter#164071

[dorklein]

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

This example you added should reproduce the problem.

I found the arg that creates the problem (in FormBuilderTextField and TextFormField).
If you don't assign a list to autofillHints (emitting it, assigning null) it breaks.
If you just add autofillHints: const [] it works.

Probably something down the chain broke it, maybe EditableText widget.

[deandreamatias]

You add a property controller: controller, that I don't know how initialize and how you use.
Because that I need the entire example.

I think that this bug is related to Flutter and no to this package, but need to confirm

[dorklein]

You add a property controller: controller, that I don't know how initialize and how you use. Because that I need the entire example.

I think that this bug is related to Flutter and no to this package, but need to confirm

I initialized the controller like this:

  late final TextEditingController controller;
  
  @override
  void initState() {
    super.initState();
    controller = TextEditingController(text: '');
  }

The bug is related to Flutter. It has to do with autofillHints, if not giving any value or giving null, it will break the form field in web mobile.