flutter-form-builder-ecosystem / flutter_form_builder

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

When using globalKey.currentState?.saveAndValidate to save and validate a form, a date picker will pop up. #1353

Open InTheClodus opened 5 months ago

InTheClodus commented 5 months ago

Is there an existing issue for this?

Package/Plugin version

9.1.1

Platforms

Flutter doctor

Flutter doctor ```bash [√] Flutter (Channel stable, 3.16.2, on Microsoft Windows [版本 10.0.19045.3930], locale zh-CN) • Flutter version 3.16.2 on channel stable at D:\flutterSDK3.7.1\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 9e1c857886 (7 weeks ago), 2023-11-30 11:51:18 -0600 • Engine revision cf7a9d0800 • Dart version 3.2.2 • DevTools version 2.28.3 • Pub download mirror https://pub.flutter-io.cn • Flutter download mirror https://storage.flutter-io.cn [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 33.0.1) • Android SDK at C:\Users\86136\AppData\Local\Android\Sdk • Platform android-34, build-tools 33.0.1 • ANDROID_HOME = C:\Users\86136\AppData\Local\Android\Sdk • ANDROID_SDK_ROOT = C:\Users\86136\AppData\Local\Android\Sdk • Java binary at: D:\software\AndroidStudio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [!] Android Studio (version 2022.2) • Android Studio at D:\software\AS • 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 X Unable to determine bundled Java version. • Try updating or re-installing Android Studio. [√] Android Studio (version 2022.3) • Android Studio at D:\software\AndroidStudio • 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-b2043.56-10027231) ```

Minimal code example

Code sample ```dart import 'package:flutter/cupertino.dart'; 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() { return runApp(AppTest()); } class AppTest extends StatefulWidget { const AppTest({super.key}); @override State createState() => _AppTestState(); } class _AppTestState extends State { final GlobalKey _globalKey = GlobalKey(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: Text("Test"), ), body: SingleChildScrollView( child: FormBuilder( key: _globalKey, child: Column( children: [ FormBuilderTextField( name: "account", decoration: const InputDecoration( hintText: "LOGIN ID", ), validator: FormBuilderValidators.compose([ FormBuilderValidators.required( errorText: "This field is required"), ]), ), FormBuilderTextField( name: "password", decoration: const InputDecoration( hintText: "Password", ), validator: FormBuilderValidators.compose([ FormBuilderValidators.required( errorText: "This field is required"), ]), ), FormBuilderDateTimePicker( name: 'licenceEndDate', inputType: InputType.date, validator: FormBuilderValidators.compose([ FormBuilderValidators.required( errorText: "This field is required"), ]), decoration: InputDecoration( isCollapsed: true, contentPadding: const EdgeInsets.symmetric( horizontal: 10, vertical: 10, ), filled: true, errorText: '', hintText: "DriverLicenseExpiryDate", hintStyle: const TextStyle( color: Color(0xFF979696), fontSize: 18, ), border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(2.0), ), ), ), ElevatedButton( onPressed: (){ if (_globalKey.currentState?.saveAndValidate()??false) { print(_globalKey.currentState!.value); } }, style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.blue), shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular(100)), ), minimumSize: MaterialStateProperty.all( Size(double.infinity, 40), ), ), child: Text( "Next", style: Theme.of(context) .textTheme .headlineSmall ?.copyWith(fontWeight: FontWeight.w600), ), ) ], ), ), ), ), ); } } ```

Current Behavior

I'm trying to register user information, and traditionally, I've been using saveAndValidate to validate the form information. However, today I noticed that using this method triggers the date picker to pop up, even though I have already selected the date and time.

Expected Behavior

Run the minimal example code above. After completing the input and selecting the date, it should print out the form content instead of triggering the date picker.

Steps To Reproduce

Flutter version 3.16.2 Dart version 3.2.2 • DevTools version 2.28.3

flutter pub get
flutter run

Aditional information

https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/assets/33110499/1e9c6abc-5bdd-410f-8bfa-35cbd5d96426

InTheClodus commented 5 months ago

https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/assets/33110499/5ae87b90-63a8-4829-8220-d6ce029f6689

The video uploaded above is not very clear, so I have re-uploaded a new one.

InTheClodus commented 3 months ago
  Future<void> _handleFocus() async {
    if (effectiveFocusNode.hasFocus && enabled) {
      effectiveFocusNode.unfocus();
      await onShowPicker(context, value);
    }
  }

I found the issue lies within the code snippet above. This portion of the code exists within the FormBuilderDateTimePicker, where whenever the validate method is executed, it invariably reaches this point and triggers onShowPicker.

Masadow commented 3 months ago

Hi, I found that having a ChangeNotifier that rebuild a widget holding a FormBuilderDateTimePicker produces the same issue.

I also noticed that removing the required validator suppressed the issue even if it's not what we're looking for

InTheClodus commented 3 months ago

Hi, I found that having a ChangeNotifier that rebuild a widget holding a FormBuilderDateTimePicker produces the same issue.

I also noticed that removing the required validator suppressed the issue even if it's not what we're looking for

Yes, but there are many times where validator is required