feat: improve focus on date pickers

Author: deandreamatias

lib/src/fields/form_builder_date_range_picker.dart

@@ -134,40 +134,44 @@ class FormBuilderDateRangePicker
           builder: (FormFieldState<DateTimeRange?> field) {
             final state = field as _FormBuilderDateRangePickerState;
 
-            return TextField(
-              enabled: state.enabled,
-              style: style,
-              focusNode: state.effectiveFocusNode,
-              decoration: state.decoration,
-              // initialValue: "${_initialValue ?? ''}",
-              maxLines: maxLines,
-              keyboardType: keyboardType,
-              obscureText: obscureText,
-              onEditingComplete: onEditingComplete,
-              controller: state._effectiveController,
-              autocorrect: autocorrect,
-              autofocus: autofocus,
-              buildCounter: buildCounter,
-              mouseCursor: mouseCursor,
-              cursorColor: cursorColor,
-              cursorRadius: cursorRadius,
-              cursorWidth: cursorWidth,
-              enableInteractiveSelection: enableInteractiveSelection,
-              maxLength: maxLength,
-              inputFormatters: inputFormatters,
-              keyboardAppearance: keyboardAppearance,
-              maxLengthEnforcement: maxLengthEnforcement,
-              scrollPadding: scrollPadding,
-              textAlign: textAlign,
-              textCapitalization: textCapitalization,
-              textDirection: textDirection,
-              textInputAction: textInputAction,
-              textAlignVertical: textAlignVertical,
-              strutStyle: strutStyle,
-              readOnly: true,
-              expands: expands,
-              minLines: minLines,
-              showCursor: showCursor,
+            return FocusTraversalGroup(
+              policy: ReadingOrderTraversalPolicy(),
+              child: TextField(
+                onTap: () => state.showPicker(),
+                enabled: state.enabled,
+                style: style,
+                focusNode: state.effectiveFocusNode,
+                decoration: state.decoration,
+                // initialValue: "${_initialValue ?? ''}",
+                maxLines: maxLines,
+                keyboardType: keyboardType,
+                obscureText: obscureText,
+                onEditingComplete: onEditingComplete,
+                controller: state._effectiveController,
+                autocorrect: autocorrect,
+                autofocus: autofocus,
+                buildCounter: buildCounter,
+                mouseCursor: mouseCursor,
+                cursorColor: cursorColor,
+                cursorRadius: cursorRadius,
+                cursorWidth: cursorWidth,
+                enableInteractiveSelection: enableInteractiveSelection,
+                maxLength: maxLength,
+                inputFormatters: inputFormatters,
+                keyboardAppearance: keyboardAppearance,
+                maxLengthEnforcement: maxLengthEnforcement,
+                scrollPadding: scrollPadding,
+                textAlign: textAlign,
+                textCapitalization: textCapitalization,
+                textDirection: textDirection,
+                textInputAction: textInputAction,
+                textAlignVertical: textAlignVertical,
+                strutStyle: strutStyle,
+                readOnly: true,
+                expands: expands,
+                minLines: minLines,
+                showCursor: showCursor,
+              ),
             );
           },
         );
@@ -195,55 +199,57 @@ class _FormBuilderDateRangePickerState extends FormBuilderFieldDecorationState<
     super.initState();
     _effectiveController =
         widget.controller ?? TextEditingController(text: _valueToText());
-    effectiveFocusNode.addListener(_handleFocus);
+
+    effectiveFocusNode.onKeyEvent = (node, event) {
+      if (enabled &&
+          event is KeyDownEvent &&
+          event.logicalKey == LogicalKeyboardKey.space &&
+          node.hasFocus) {
+        showPicker();
+        return KeyEventResult.handled;
+      }
+      return KeyEventResult.ignored;
+    };
   }
 
   @override
   void dispose() {
-    effectiveFocusNode.removeListener(_handleFocus);
     // Dispose the _effectiveController when initState created it
     if (null == widget.controller) {
       _effectiveController.dispose();
     }
     super.dispose();
   }
 
-  Future<void> _handleFocus() async {
-    if (effectiveFocusNode.hasFocus && enabled) {
-      effectiveFocusNode.unfocus();
-      /*final initialFirstDate = value?.isEmpty ?? true
-          ? (widget.initialFirstDate ?? DateTime.now())
-          : value[0];
-      final initialLastDate = value?.isEmpty ?? true
-          ? (widget.initialLastDate ?? initialFirstDate)
-          : (value.length < 2 ? initialFirstDate : value[1]);*/
-      final picked = await showDateRangePicker(
-        context: context,
-        firstDate: widget.firstDate,
-        lastDate: widget.lastDate,
-        locale: widget.locale,
-        textDirection: widget.textDirection,
-        cancelText: widget.cancelText,
-        confirmText: widget.confirmText,
-        currentDate: widget.currentDate,
-        errorFormatText: widget.errorFormatText,
-        builder: widget.pickerBuilder,
-        errorInvalidRangeText: widget.errorInvalidRangeText,
-        errorInvalidText: widget.errorInvalidText,
-        fieldEndHintText: widget.fieldEndHintText,
-        fieldEndLabelText: widget.fieldEndLabelText,
-        fieldStartHintText: widget.fieldStartHintText,
-        fieldStartLabelText: widget.fieldStartLabelText,
-        helpText: widget.helpText,
-        initialDateRange: value,
-        initialEntryMode: widget.initialEntryMode,
-        routeSettings: widget.routeSettings,
-        saveText: widget.saveText,
-        useRootNavigator: widget.useRootNavigator,
-      );
-      if (picked != null) {
-        didChange(picked);
-      }
+  Future<void> showPicker() async {
+    effectiveFocusNode.requestFocus();
+
+    final picked = await showDateRangePicker(
+      context: context,
+      firstDate: widget.firstDate,
+      lastDate: widget.lastDate,
+      locale: widget.locale,
+      textDirection: widget.textDirection,
+      cancelText: widget.cancelText,
+      confirmText: widget.confirmText,
+      currentDate: widget.currentDate,
+      errorFormatText: widget.errorFormatText,
+      builder: widget.pickerBuilder,
+      errorInvalidRangeText: widget.errorInvalidRangeText,
+      errorInvalidText: widget.errorInvalidText,
+      fieldEndHintText: widget.fieldEndHintText,
+      fieldEndLabelText: widget.fieldEndLabelText,
+      fieldStartHintText: widget.fieldStartHintText,
+      fieldStartLabelText: widget.fieldStartLabelText,
+      helpText: widget.helpText,
+      initialDateRange: value,
+      initialEntryMode: widget.initialEntryMode,
+      routeSettings: widget.routeSettings,
+      saveText: widget.saveText,
+      useRootNavigator: widget.useRootNavigator,
+    );
+    if (picked != null) {
+      didChange(picked);
     }
   }
 
@@ -277,14 +283,15 @@ class _FormBuilderDateRangePickerState extends FormBuilderFieldDecorationState<
   @override
   InputDecoration get decoration => widget.allowClear
       ? super.decoration.copyWith(
-          suffix: IconButton(
+            suffix: IconButton(
               padding: EdgeInsets.zero,
               constraints: const BoxConstraints(maxWidth: 24, maxHeight: 24),
               onPressed: () {
                 focus();
                 didChange(null);
-                effectiveFocusNode.unfocus();
               },
-              icon: widget.clearIcon ?? const Icon(Icons.clear)))
+              icon: widget.clearIcon ?? const Icon(Icons.clear),
+            ),
+          )
       : super.decoration;
 }

lib/src/fields/form_builder_date_time_picker.dart

@@ -201,39 +201,43 @@ class FormBuilderDateTimePicker extends FormBuilderFieldDecoration<DateTime> {
           builder: (FormFieldState<DateTime?> field) {
             final state = field as _FormBuilderDateTimePickerState;
 
-            return TextField(
-              textDirection: textDirection,
-              textAlign: textAlign,
-              textAlignVertical: textAlignVertical,
-              maxLength: maxLength,
-              autofocus: autofocus,
-              decoration: state.decoration,
-              readOnly: true,
-              enabled: state.enabled,
-              autocorrect: autocorrect,
-              controller: state._textFieldController,
-              focusNode: state.effectiveFocusNode,
-              inputFormatters: inputFormatters,
-              keyboardType: keyboardType,
-              maxLines: maxLines,
-              obscureText: obscureText,
-              showCursor: showCursor,
-              minLines: minLines,
-              expands: expands,
-              style: style,
-              onEditingComplete: onEditingComplete,
-              buildCounter: buildCounter,
-              mouseCursor: mouseCursor,
-              cursorColor: cursorColor,
-              cursorRadius: cursorRadius,
-              cursorWidth: cursorWidth,
-              enableInteractiveSelection: enableInteractiveSelection,
-              keyboardAppearance: keyboardAppearance,
-              scrollPadding: scrollPadding,
-              strutStyle: strutStyle,
-              textCapitalization: textCapitalization,
-              textInputAction: textInputAction,
-              maxLengthEnforcement: maxLengthEnforcement,
+            return FocusTraversalGroup(
+              policy: ReadingOrderTraversalPolicy(),
+              child: TextField(
+                onTap: () => state.showPicker(),
+                textDirection: textDirection,
+                textAlign: textAlign,
+                textAlignVertical: textAlignVertical,
+                maxLength: maxLength,
+                autofocus: autofocus,
+                decoration: state.decoration,
+                readOnly: true,
+                enabled: state.enabled,
+                autocorrect: autocorrect,
+                controller: state._textFieldController,
+                focusNode: state.effectiveFocusNode,
+                inputFormatters: inputFormatters,
+                keyboardType: keyboardType,
+                maxLines: maxLines,
+                obscureText: obscureText,
+                showCursor: showCursor,
+                minLines: minLines,
+                expands: expands,
+                style: style,
+                onEditingComplete: onEditingComplete,
+                buildCounter: buildCounter,
+                mouseCursor: mouseCursor,
+                cursorColor: cursorColor,
+                cursorRadius: cursorRadius,
+                cursorWidth: cursorWidth,
+                enableInteractiveSelection: enableInteractiveSelection,
+                keyboardAppearance: keyboardAppearance,
+                scrollPadding: scrollPadding,
+                strutStyle: strutStyle,
+                textCapitalization: textCapitalization,
+                textInputAction: textInputAction,
+                maxLengthEnforcement: maxLengthEnforcement,
+              ),
             );
           },
         );
@@ -258,36 +262,38 @@ class _FormBuilderDateTimePickerState extends FormBuilderFieldDecorationState<
     final initVal = value;
     _textFieldController.text =
         initVal == null ? '' : _dateFormat.format(initVal);
-    effectiveFocusNode.addListener(_handleFocus);
+
+    effectiveFocusNode.onKeyEvent = (node, event) {
+      if (event is KeyDownEvent &&
+          event.logicalKey == LogicalKeyboardKey.space &&
+          node.hasFocus) {
+        showPicker();
+        return KeyEventResult.handled;
+      }
+      return KeyEventResult.ignored;
+    };
   }
 
   @override
   void dispose() {
-    effectiveFocusNode.removeListener(_handleFocus);
     // Dispose the _textFieldController when initState created it
     if (null == widget.controller) {
       _textFieldController.dispose();
     }
     super.dispose();
   }
 
-  Future<void> _handleFocus() async {
-    if (effectiveFocusNode.hasFocus && enabled) {
-      effectiveFocusNode.unfocus();
-      await onShowPicker(value);
-    }
-  }
-
   DateFormat _getDefaultDateTimeFormat() {
     final languageCode = widget.locale?.languageCode;
-    switch (widget.inputType) {
-      case InputType.time:
-        return DateFormat.Hm(languageCode);
-      case InputType.date:
-        return DateFormat.yMd(languageCode);
-      case InputType.both:
-        return DateFormat.yMd(languageCode).add_Hms();
-    }
+    return switch (widget.inputType) {
+      InputType.time => DateFormat.Hm(languageCode),
+      InputType.date => DateFormat.yMd(languageCode),
+      InputType.both => DateFormat.yMd(languageCode).add_Hms()
+    };
+  }
+
+  Future<void> showPicker() async {
+    await onShowPicker(value);
   }
 
   Future<DateTime?> onShowPicker(DateTime? currentValue) async {