[FormBuilderDateTimePicker]: Can't open the picker dialog dynamically anymore

[geronimol]

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

[✓] Flutter (Channel stable, 3.29.0, on macOS 13.7.2 22H313 darwin-x64, locale es-419) [1,442ms]
    • Flutter version 3.29.0 on channel stable at /Users/gero/fvm/versions/3.29.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35c388afb5 (4 weeks ago), 2025-02-10 12:48:41 -0800
    • Engine revision f73bfc4522
    • Dart version 3.7.0
    • DevTools version 2.42.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [5.7s]
    • Android SDK at /Users/gero/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915915-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2) [7.1s]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2024.2) [45ms]
    • 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 21.0.3+-79915915-b509.11)

[✓] Android Studio (version 2024.2) [41ms]
    • Android Studio at /Volumes/Latest/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 21.0.3+-79915915-b509.11)

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

[✓] Connected device (2 available) [9.4s]
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.7.2 22H313 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 133.0.6943.143

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

• No issues found!

Minimal code example

Code sample

class PickerBug extends StatefulWidget {
  const PickerBug({super.key});

  @override
  State<PickerBug> createState() => _PickerBugState();
}

class _PickerBugState extends State<PickerBug> {
  final formKey = GlobalKey<FormBuilderState>();
  final controller = TextEditingController();
  final focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: FormBuilder(
          key: formKey,
          child: Column(
            children: [
              FormBuilderDateTimePicker(
                name: 'dateTime',
                controller: controller,
                focusNode: focusNode,
                barrierDismissible: false,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                timePickerInitialEntryMode: TimePickerEntryMode.input,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  label: Text('DateTime'),
                ),
              )
            ],
          ),
        ),
      ),
      bottomSheet: Padding(
        padding: const EdgeInsets.all(20.0),
        child: ElevatedButton(
          onPressed: () => focusNode.requestFocus(),
          child: Text('Request Focus'),
        ),
      ),
    );
  }
}

Current Behavior

Text field is focused, but picker dialog won't open.

Expected Behavior

In the previous version it was opening the picker dialog.

Steps To Reproduce

1. Run the sample code.
2. Click the "Request Focus" button.

Aditional information

I was using focusNode.requestFocus() to open the picker dialog dynamically. Is there a new way of doing this in the latest version?

[deandreamatias]

Hi @geronimol
This change was implemented to improve accessibility for this FormField. Can see details of issue here #1301

Open the picker dialog automatically when the field is focused, isn't a good practice for accessibility reasons. But, if you need to open the picker dialog dynamically for other purposes, I agree that is a feature that would be useful.

[geronimol]

@deandreamatias I have a use case where a user picks a dateTime, then if it doesn't meet certain conditions, it must show a new dialog where he can press a "Cancel" button. This will close the new dialog and open the picker dialog again.

I sent a PR to add this feature. Let me know if you think that will work. Thanks!