feat: #1297 Improve focus behavior

example/lib/minimal_code_example.dart

@@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:form_builder_validators/form_builder_validators.dart';
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter FormBuilder Example',
+      debugShowCheckedModeBanner: false,
+      localizationsDelegates: const [
+        FormBuilderLocalizations.delegate,
+        ...GlobalMaterialLocalizations.delegates,
+        GlobalWidgetsLocalizations.delegate,
+      ],
+      supportedLocales: FormBuilderLocalizations.supportedLocales,
+      home: const _ExamplePage(),
+    );
+  }
+}
+
+class _ExamplePage extends StatefulWidget {
+  const _ExamplePage();
+
+  @override
+  State<_ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<_ExamplePage> {
+  final _formKey = GlobalKey<FormBuilderState>();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Minimal code example')),
+      body: Padding(
+        padding: const EdgeInsets.all(16),
+        child: FormBuilder(
+          key: _formKey,
+          child: Column(
+            children: [
+              FormBuilderFilterChip<String>(
+                decoration: const InputDecoration(
+                  labelText: 'The language of my people',
+                  enabled: false,
+                ),
+                name: 'languages_filter',
+                selectedColor: Colors.red,
+                options: const [
+                  FormBuilderChipOption(
+                    value: 'Dart',
+                    avatar: CircleAvatar(child: Text('D')),
+                  ),
+                  FormBuilderChipOption(
+                    value: 'Kotlin',
+                    avatar: CircleAvatar(child: Text('K')),
+                  ),
+                  FormBuilderChipOption(
+                    value: 'Java',
+                    avatar: CircleAvatar(child: Text('J')),
+                  ),
+                  FormBuilderChipOption(
+                    value: 'Swift',
+                    avatar: CircleAvatar(child: Text('S')),
+                  ),
+                  FormBuilderChipOption(
+                    value: 'Objective-C',
+                    avatar: CircleAvatar(child: Text('O')),
+                  ),
+                ],
+                validator: FormBuilderValidators.compose([
+                  FormBuilderValidators.minLength(1),
+                  FormBuilderValidators.maxLength(3),
+                ]),
+              ),
+              const SizedBox(height: 10),
+              ElevatedButton(
+                onPressed: () {
+                  _formKey.currentState?.saveAndValidate();
+                  debugPrint(_formKey.currentState?.value.toString());
+                },
+                child: const Text('Print'),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/fields/form_builder_checkbox.dart

@@ -125,9 +125,11 @@ class FormBuilderCheckbox extends FormBuilderFieldDecoration<bool> {
 
             return InputDecorator(
               decoration: state.decoration,
+              isFocused: state.effectiveFocusNode.hasFocus,
               child: CheckboxListTile(
                 dense: true,
                 isThreeLine: false,
+                focusNode: state.effectiveFocusNode,
                 title: title,
                 subtitle: subtitle,
                 value: tristate ? state.value : (state.value ?? false),
@@ -158,4 +160,26 @@ class FormBuilderCheckbox extends FormBuilderFieldDecoration<bool> {
 }
 
 class _FormBuilderCheckboxState
-    extends FormBuilderFieldDecorationState<FormBuilderCheckbox, bool> {}
+    extends FormBuilderFieldDecorationState<FormBuilderCheckbox, bool> {
+  void handleFocusChange() {
+    setState(() {});
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    effectiveFocusNode.addListener(handleFocusChange);
+  }
+
+  @override
+  void dispose() {
+    effectiveFocusNode.removeListener(handleFocusChange);
+    super.dispose();
+  }
+
+  @override
+  void didChange(bool? value) {
+    focus();
+    super.didChange(value);
+  }
+}

lib/src/fields/form_builder_checkbox_group.dart

@@ -69,36 +69,43 @@
           builder: (FormFieldState<List<T>?> field) {
             final state = field as _FormBuilderCheckboxGroupState<T>;
 
-            return InputDecorator(
-              decoration: state.decoration,
-              child: GroupedCheckbox<T>(
-                orientation: orientation,
-                value: state.value,
-                options: options,
-                onChanged: (val) {
-                  field.didChange(val);
-                },
-                disabled: state.enabled
-                    ? disabled
-                    : options.map((e) => e.value).toList(),
-                activeColor: activeColor,
-                visualDensity: visualDensity,
-                focusColor: focusColor,
-                checkColor: checkColor,
-                materialTapTargetSize: materialTapTargetSize,
-                hoverColor: hoverColor,
-                tristate: tristate,
-                wrapAlignment: wrapAlignment,
-                wrapCrossAxisAlignment: wrapCrossAxisAlignment,
-                wrapDirection: wrapDirection,
-                wrapRunAlignment: wrapRunAlignment,
-                wrapRunSpacing: wrapRunSpacing,
-                wrapSpacing: wrapSpacing,
-                wrapTextDirection: wrapTextDirection,
-                wrapVerticalDirection: wrapVerticalDirection,
-                separator: separator,
-                controlAffinity: controlAffinity,
-                itemDecoration: itemDecoration,
+            return Focus(
+              focusNode: state.effectiveFocusNode,
+              skipTraversal: true,
+              canRequestFocus: state.enabled,
+              debugLabel: 'FormBuilderCheckboxGroup-$name',
+              child: InputDecorator(
+                decoration: state.decoration,
+                isFocused: state.effectiveFocusNode.hasFocus,
+                child: GroupedCheckbox<T>(
+                  orientation: orientation,
+                  value: state.value,
+                  options: options,
+                  onChanged: (val) {
+                    field.didChange(val);
+                  },
+                  disabled: state.enabled
+                      ? disabled
+                      : options.map((e) => e.value).toList(),
+                  activeColor: activeColor,
+                  visualDensity: visualDensity,
+                  focusColor: focusColor,
+                  checkColor: checkColor,
+                  materialTapTargetSize: materialTapTargetSize,
+                  hoverColor: hoverColor,
+                  tristate: tristate,
+                  wrapAlignment: wrapAlignment,
+                  wrapCrossAxisAlignment: wrapCrossAxisAlignment,
+                  wrapDirection: wrapDirection,
+                  wrapRunAlignment: wrapRunAlignment,
+                  wrapRunSpacing: wrapRunSpacing,
+                  wrapSpacing: wrapSpacing,
+                  wrapTextDirection: wrapTextDirection,
+                  wrapVerticalDirection: wrapVerticalDirection,
+                  separator: separator,
+                  controlAffinity: controlAffinity,
+                  itemDecoration: itemDecoration,
+                ),
               ),
             );
           },

lib/src/fields/form_builder_choice_chips.dart

@@ -395,56 +395,63 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
   }) : super(builder: (FormFieldState<T?> field) {
           final state = field as _FormBuilderChoiceChipState<T>;
 
-          return InputDecorator(
-            decoration: state.decoration,
-            child: Wrap(
-              direction: direction,
-              alignment: alignment,
-              crossAxisAlignment: crossAxisAlignment,
-              runAlignment: runAlignment,
-              runSpacing: runSpacing,
-              spacing: spacing,
-              textDirection: textDirection,
-              verticalDirection: verticalDirection,
-              children: <Widget>[
-                for (FormBuilderChipOption<T> option in options)
-                  ChoiceChip(
-                    label: option,
-                    side: side,
-                    shape: shape,
-                    selected: field.value == option.value,
-                    onSelected: state.enabled
-                        ? (selected) {
-                            final choice = selected ? option.value : null;
-                            state.didChange(choice);
-                          }
-                        : null,
-                    avatar: option.avatar,
-                    selectedColor: selectedColor,
-                    disabledColor: disabledColor,
-                    backgroundColor: backgroundColor,
-                    shadowColor: shadowColor,
-                    selectedShadowColor: selectedShadowColor,
-                    elevation: elevation,
-                    pressElevation: pressElevation,
-                    materialTapTargetSize: materialTapTargetSize,
-                    labelStyle: labelStyle,
-                    labelPadding: labelPadding,
-                    padding: padding,
-                    visualDensity: visualDensity,
-                    avatarBorder: avatarBorder,
-                    showCheckmark: showCheckmark,
-                    surfaceTintColor: surfaceTintColor,
-                    clipBehavior: clipBehavior,
-                    checkmarkColor: checkmarkColor,
-                    autofocus: autofocus,
-                    avatarBoxConstraints: avatarBoxConstraints,
-                    chipAnimationStyle: chipAnimationStyle,
-                    color: color,
-                    iconTheme: iconTheme,
-                    tooltip: tooltip,
-                  ),
-              ],
+          return Focus(
+            focusNode: state.effectiveFocusNode,
+            skipTraversal: true,
+            canRequestFocus: state.enabled,
+            debugLabel: 'FormBuilderChoiceChip-$name',
+            child: InputDecorator(
+              decoration: state.decoration,
+              isFocused: state.effectiveFocusNode.hasFocus,
+              child: Wrap(
+                direction: direction,
+                alignment: alignment,
+                crossAxisAlignment: crossAxisAlignment,
+                runAlignment: runAlignment,
+                runSpacing: runSpacing,
+                spacing: spacing,
+                textDirection: textDirection,
+                verticalDirection: verticalDirection,
+                children: <Widget>[
+                  for (FormBuilderChipOption<T> option in options)
+                    ChoiceChip(
+                      label: option,
+                      side: side,
+                      shape: shape,
+                      selected: field.value == option.value,
+                      onSelected: state.enabled
+                          ? (selected) {
+                              final choice = selected ? option.value : null;
+                              state.didChange(choice);
+                            }
+                          : null,
+                      avatar: option.avatar,
+                      selectedColor: selectedColor,
+                      disabledColor: disabledColor,
+                      backgroundColor: backgroundColor,
+                      shadowColor: shadowColor,
+                      selectedShadowColor: selectedShadowColor,
+                      elevation: elevation,
+                      pressElevation: pressElevation,
+                      materialTapTargetSize: materialTapTargetSize,
+                      labelStyle: labelStyle,
+                      labelPadding: labelPadding,
+                      padding: padding,
+                      visualDensity: visualDensity,
+                      avatarBorder: avatarBorder,
+                      showCheckmark: showCheckmark,
+                      surfaceTintColor: surfaceTintColor,
+                      clipBehavior: clipBehavior,
+                      checkmarkColor: checkmarkColor,
+                      autofocus: autofocus,
+                      avatarBoxConstraints: avatarBoxConstraints,
+                      chipAnimationStyle: chipAnimationStyle,
+                      color: color,
+                      iconTheme: iconTheme,
+                      tooltip: tooltip,
+                    ),
+                ],
+              ),
             ),
           );
         });
@@ -455,4 +462,27 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
 }
 
 class _FormBuilderChoiceChipState<T>
-    extends FormBuilderFieldDecorationState<FormBuilderChoiceChip<T>, T> {}
+    extends FormBuilderFieldDecorationState<FormBuilderChoiceChip<T>, T> {
+  void handleFocusChange() {
+    setState(() {});
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    effectiveFocusNode.addListener(handleFocusChange);
+  }
+
+  @override
+  void dispose() {
+    effectiveFocusNode.removeListener(handleFocusChange);
+    super.dispose();
+  }
+
+  @override
+  void didChange(T? value) {
+    focus();
+    // effectiveFocusNode.requestFocus();
+    super.didChange(value);
+  }
+}