[General]: Can't close keyboard after error on field with user interact mode

[Draptol]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.1.0

Platforms

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

Flutter doctor

Flutter doctor

[✓] Flutter (Channel stable, 3.13.1, on macOS 13.2.1 22D68 darwin-arm64 (Rosetta), locale pl-PL)
    • Flutter version 3.13.1 on channel stable at /Users/piotrchwaleba/Library/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e1e47221e8 (5 days ago), 2023-08-22 21:43:18 -0700
    • Engine revision b20183e040
    • Dart version 3.1.0
    • DevTools version 2.25.0

[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/piotrchwaleba/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2022.3)
    • 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.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.81.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Minimal code example

Code sample

...
 FormBuilder(
    key: _formKey,
    autovalidateMode: AutovalidateMode.onUserInteraction,
    child: Column(
      children: [
        CustomTextField(
          name: 'login',
          labelText: AppLocalizations.of(context)!.email_label,
          validator: FormBuilderValidators.compose([
            FormBuilderValidators.required(errorText: AppLocalizations.of(context)!.required_field_error),
            FormBuilderValidators.email(errorText: AppLocalizations.of(context)!.wrong_email_error),
          ]),
        ),
        const SizedBox(
          height: 16,
        ),
        CustomTextField.password(
          name: 'password',
          labelText: AppLocalizations.of(context)!.password_label,
          validator: FormBuilderValidators.compose([
            FormBuilderValidators.required(errorText: AppLocalizations.of(context)!.required_field_error),
          ]),
        ),
      ],
    ),
  )
....
// ---- CustomTextField ----
class CustomTextField extends StatefulWidget {
  final FormFieldValidator<String>? validator;
  final String name;
  final bool password;
  final String labelText;
  final TextInputType? keyboardType;
  final String? initialValue;

  const CustomTextField({
    Key? key,
    required this.name,
    required this.labelText,
    this.validator,
    this.keyboardType,
    this.initialValue,
  }) : password = false, super(key: key);

  const CustomTextField.password({
    Key? key,
    required this.name,
    required this.labelText,
    this.validator,
    this.keyboardType,
    this.initialValue,
  }) : password = true, super(key: key);

  @override
  State<StatefulWidget> createState() => _TextField();
}

class _TextField extends State<CustomTextField> {
  final FocusNode _textFieldFocus = FocusNode();
  Color _filledColor = Colors.white;
  bool _isObscure = true;

  @override
  void dispose() {
    _textFieldFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _textFieldFocus.addListener(() {
      setState(() {
        _filledColor = _textFieldFocus.hasFocus
          ? const Color(0xFFf1f7f5)
          : Colors.white;
      });
    });

    return Theme(
      data: ThemeData().copyWith(
        // change the focus border color of the TextField
        colorScheme: ThemeData().colorScheme.copyWith(
          primary: const Color(0xFF94C11F),
        ),
      ),
      child: FormBuilderTextField(
        name: widget.name,
        focusNode: _textFieldFocus,
        validator: widget.validator,
        cursorColor: Colors.black,
        keyboardType: widget.keyboardType,
        obscureText: widget.password && _isObscure,
        initialValue: widget.initialValue,
        decoration: InputDecoration(
          suffixIcon: widget.password
            ? IconButton(
              icon: Icon(
                _isObscure ? Icons.visibility : Icons.visibility_off,
              ),
              splashRadius: 24,
              //splashColor: Colors.green,
              onPressed: () {
                setState(() {
                  _isObscure = !_isObscure;
                });
              },
            )
            : null,
          filled: _textFieldFocus.hasFocus,
          border: const OutlineInputBorder(),
          fillColor: _filledColor,
          labelText: widget.labelText,
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFF94C11F),
              width: 2,
            ),
          ),
        ),
      ),
    );
  }
}

Current Behavior

Form builder versions:

• form_builder_extra_fields: ^10.0.0
• flutter_form_builder: ^9.1.0
• form_builder_validators: ^9.0.0

Test phone:

• Samsun S10+
• Android 12
• One UI 4.1

If we have focus and validation returns error we can't close keyboard. I updated my project from Flutter 2.x to 3.x and from Form builder 8.0.0 to 9.1.0. After that I have a problem with keyboard and focus. Moreover, if I move to another page I still have focus from previous page (look field "Imię" in the movie). The next problem is with FormBuilderDateTimePicker. If I open it, the keyboard will act crazy :).

Please look at my movie:
https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/assets/7459241/d23c1b13-12cb-4dff-9d62-5af4ee883067

Expected Behavior

It should work like in previous version of flutter or maybe Form Builder. Look at my movie from build before making any changes of flutter and form builder versions.

Movie of accepted behaviour:
https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/assets/7459241/0ab9b1e4-3268-4b42-8980-93f41f998cd2

Steps To Reproduce

1. Add Form builder with validation and mode validate on user interact
2. Add two pages/screens wth different Form builders.
3. Run on physical device
4. Problem should appear

Aditional information

No response

[Draptol]

Can someone help me?

I checked. Everythings work well If I downgrade to:
flutter_form_builder: ^7.7.0
form_builder_validators: ^8.4.0
form_builder_extra_fields: ^8.3.0

[huajian-hehe]

hi, same issue here when using flutter_form_builder: ^9.1.1.

I did a workaround where i removed the autovalidateMode: AutovalidateMode.onUserInteraction in FormBuilder and move it in each FormBuilderTextField.

[zaycode]

yes i have same isuu too

[UsamaKarim]

hi, same issue here when using flutter_form_builder: ^9.1.1.

I did a workaround where i removed the autovalidateMode: AutovalidateMode.onUserInteraction in FormBuilder and move it in each FormBuilderTextField.

This keyboard now closes, but the error under the field is not removed when user interact with the field

[deandreamatias]

@zaycode @Draptol please take a look if the prerelease version 10.0.0-dev.1 solve this
Thanks

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.