search

flutter-form-builder-ecosystem / flutter_form_builder

Simple form maker for Flutter Framework
https://pub.dev/packages/flutter_form_builder
MIT License
1.48k stars 535 forks source link

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

Open Draptol opened 1 year ago

Draptol commented 1 year ago

Is there an existing issue for this?

Package/Plugin version

9.1.0

Platforms

Flutter doctor

Flutter doctor ```bash [✓] 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 ```dart ... 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? 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 createState() => _TextField(); } class _TextField extends State { 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:

Test phone:

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 commented 1 year ago

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 commented 8 months ago

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 commented 8 months ago

yes i have same isuu too

UsamaKarim commented 4 months ago

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