feat: improve focus on fields with list widgets

Author: deandreamatias

lib/src/fields/form_builder_checkbox_group.dart

@@ -69,38 +69,43 @@ class FormBuilderCheckboxGroup<T> extends FormBuilderFieldDecoration<List<T>> {
           builder: (FormFieldState<List<T>?> field) {
             final state = field as _FormBuilderCheckboxGroupState<T>;
 
-            return InputDecorator(
-              decoration: state.decoration,
-              isFocused: state.effectiveFocusNode.hasFocus,
-              child: GroupedCheckbox<T>(
-                focusNode: state.effectiveFocusNode,
-                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

@@ -397,6 +397,9 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
 
           return Focus(
             focusNode: state.effectiveFocusNode,
+            skipTraversal: true,
+            canRequestFocus: state.enabled,
+            debugLabel: 'FormBuilderChoiceChip-$name',
             child: InputDecorator(
               decoration: state.decoration,
               isFocused: state.effectiveFocusNode.hasFocus,

lib/src/fields/form_builder_filter_chips.dart

@@ -81,9 +81,11 @@ class FormBuilderFilterChip<T> extends FormBuilderFieldDecoration<List<T>> {
           builder: (FormFieldState<List<T>?> field) {
             final state = field as _FormBuilderFilterChipState<T>;
             final fieldValue = field.value ?? [];
-
             return Focus(
               focusNode: state.effectiveFocusNode,
+              skipTraversal: true,
+              canRequestFocus: state.enabled,
+              debugLabel: 'FormBuilderFilterChip-$name',
               child: InputDecorator(
                 decoration: state.decoration,
                 isFocused: state.effectiveFocusNode.hasFocus,

lib/src/fields/form_builder_radio_group.dart

@@ -63,35 +63,40 @@ class FormBuilderRadioGroup<T> extends FormBuilderFieldDecoration<T> {
           builder: (FormFieldState<T?> field) {
             final state = field as _FormBuilderRadioGroupState<T>;
 
-            return InputDecorator(
-              decoration: state.decoration,
-              isFocused: state.effectiveFocusNode.hasFocus,
-              child: GroupedRadio<T>(
-                focusNode: state.effectiveFocusNode,
-                activeColor: activeColor,
-                controlAffinity: controlAffinity,
-                disabled: state.enabled
-                    ? disabled
-                    : options.map((option) => option.value).toList(),
-                focusColor: focusColor,
-                hoverColor: hoverColor,
-                materialTapTargetSize: materialTapTargetSize,
-                onChanged: (value) {
-                  state.didChange(value);
-                },
-                options: options,
-                orientation: orientation,
-                separator: separator,
-                value: state.value,
-                wrapAlignment: wrapAlignment,
-                wrapCrossAxisAlignment: wrapCrossAxisAlignment,
-                wrapDirection: wrapDirection,
-                wrapRunAlignment: wrapRunAlignment,
-                wrapRunSpacing: wrapRunSpacing,
-                wrapSpacing: wrapSpacing,
-                wrapTextDirection: wrapTextDirection,
-                wrapVerticalDirection: wrapVerticalDirection,
-                itemDecoration: itemDecoration,
+            return Focus(
+              focusNode: state.effectiveFocusNode,
+              skipTraversal: true,
+              canRequestFocus: state.enabled,
+              debugLabel: 'FormBuilderRadioGroup-$name',
+              child: InputDecorator(
+                decoration: state.decoration,
+                isFocused: state.effectiveFocusNode.hasFocus,
+                child: GroupedRadio<T>(
+                  activeColor: activeColor,
+                  controlAffinity: controlAffinity,
+                  disabled: state.enabled
+                      ? disabled
+                      : options.map((option) => option.value).toList(),
+                  focusColor: focusColor,
+                  hoverColor: hoverColor,
+                  materialTapTargetSize: materialTapTargetSize,
+                  onChanged: (value) {
+                    state.didChange(value);
+                  },
+                  options: options,
+                  orientation: orientation,
+                  separator: separator,
+                  value: state.value,
+                  wrapAlignment: wrapAlignment,
+                  wrapCrossAxisAlignment: wrapCrossAxisAlignment,
+                  wrapDirection: wrapDirection,
+                  wrapRunAlignment: wrapRunAlignment,
+                  wrapRunSpacing: wrapRunSpacing,
+                  wrapSpacing: wrapSpacing,
+                  wrapTextDirection: wrapTextDirection,
+                  wrapVerticalDirection: wrapVerticalDirection,
+                  itemDecoration: itemDecoration,
+                ),
               ),
             );
           },

lib/src/widgets/grouped_checkbox.dart

@@ -190,14 +190,11 @@ class GroupedCheckbox<T> extends StatelessWidget {
   /// [wrapSpacing] is used as inter-item right margin
   final BoxDecoration? itemDecoration;
 
-  final FocusNode focusNode;
-
   const GroupedCheckbox({
     super.key,
     required this.options,
     required this.orientation,
     required this.onChanged,
-    required this.focusNode,
     this.value,
     this.disabled,
     this.activeColor,
@@ -227,43 +224,40 @@ class GroupedCheckbox<T> extends StatelessWidget {
       widgetList.add(buildItem(i));
     }
 
-    return Focus(
-      focusNode: focusNode,
-      child: switch (orientation) {
-        OptionsOrientation.auto => OverflowBar(
-            alignment: MainAxisAlignment.spaceEvenly,
+    return switch (orientation) {
+      OptionsOrientation.auto => OverflowBar(
+          alignment: MainAxisAlignment.spaceEvenly,
+          children: widgetList,
+        ),
+      OptionsOrientation.vertical => SingleChildScrollView(
+          scrollDirection: Axis.vertical,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: widgetList,
           ),
-        OptionsOrientation.vertical => SingleChildScrollView(
-            scrollDirection: Axis.vertical,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: widgetList,
-            ),
+        ),
+      OptionsOrientation.horizontal => SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(
+            children: widgetList.map((item) {
+              return Column(children: <Widget>[item]);
+            }).toList(),
           ),
-        OptionsOrientation.horizontal => SingleChildScrollView(
-            scrollDirection: Axis.horizontal,
-            child: Row(
-              children: widgetList.map((item) {
-                return Column(children: <Widget>[item]);
-              }).toList(),
-            ),
+        ),
+      OptionsOrientation.wrap => SingleChildScrollView(
+          child: Wrap(
+            spacing: wrapSpacing,
+            runSpacing: wrapRunSpacing,
+            textDirection: wrapTextDirection,
+            crossAxisAlignment: wrapCrossAxisAlignment,
+            verticalDirection: wrapVerticalDirection,
+            alignment: wrapAlignment,
+            direction: Axis.horizontal,
+            runAlignment: wrapRunAlignment,
+            children: widgetList,
           ),
-        OptionsOrientation.wrap => SingleChildScrollView(
-            child: Wrap(
-              spacing: wrapSpacing,
-              runSpacing: wrapRunSpacing,
-              textDirection: wrapTextDirection,
-              crossAxisAlignment: wrapCrossAxisAlignment,
-              verticalDirection: wrapVerticalDirection,
-              alignment: wrapAlignment,
-              direction: Axis.horizontal,
-              runAlignment: wrapRunAlignment,
-              children: widgetList,
-            ),
-          )
-      },
-    );
+        )
+    };
   }
 
   /// the composite of all the components for the option at index

lib/src/widgets/grouped_radio.dart

@@ -181,14 +181,11 @@ class GroupedRadio<T> extends StatefulWidget {
   /// [wrapSpacing] is used as inter-item right margin
   final BoxDecoration? itemDecoration;
 
-  final FocusNode focusNode;
-
   const GroupedRadio({
     super.key,
     required this.options,
     required this.orientation,
     required this.onChanged,
-    required this.focusNode,
     this.value,
     this.disabled,
     this.activeColor,
@@ -220,39 +217,36 @@ class _GroupedRadioState<T> extends State<GroupedRadio<T?>> {
       widgetList.add(buildItem(i));
     }
 
-    return Focus(
-      focusNode: widget.focusNode,
-      child: switch (widget.orientation) {
-        OptionsOrientation.auto => OverflowBar(
-            alignment: MainAxisAlignment.spaceEvenly,
+    return switch (widget.orientation) {
+      OptionsOrientation.auto => OverflowBar(
+          alignment: MainAxisAlignment.spaceEvenly,
+          children: widgetList,
+        ),
+      OptionsOrientation.vertical => SingleChildScrollView(
+          scrollDirection: Axis.vertical,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: widgetList,
           ),
-        OptionsOrientation.vertical => SingleChildScrollView(
-            scrollDirection: Axis.vertical,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: widgetList,
-            ),
-          ),
-        OptionsOrientation.horizontal => SingleChildScrollView(
-            scrollDirection: Axis.horizontal,
-            child: Row(children: widgetList),
+        ),
+      OptionsOrientation.horizontal => SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(children: widgetList),
+        ),
+      OptionsOrientation.wrap => SingleChildScrollView(
+          child: Wrap(
+            spacing: widget.wrapSpacing,
+            runSpacing: widget.wrapRunSpacing,
+            textDirection: widget.wrapTextDirection,
+            crossAxisAlignment: widget.wrapCrossAxisAlignment,
+            verticalDirection: widget.wrapVerticalDirection,
+            alignment: widget.wrapAlignment,
+            direction: Axis.horizontal,
+            runAlignment: widget.wrapRunAlignment,
+            children: widgetList,
           ),
-        OptionsOrientation.wrap => SingleChildScrollView(
-            child: Wrap(
-              spacing: widget.wrapSpacing,
-              runSpacing: widget.wrapRunSpacing,
-              textDirection: widget.wrapTextDirection,
-              crossAxisAlignment: widget.wrapCrossAxisAlignment,
-              verticalDirection: widget.wrapVerticalDirection,
-              alignment: widget.wrapAlignment,
-              direction: Axis.horizontal,
-              runAlignment: widget.wrapRunAlignment,
-              children: widgetList,
-            ),
-          )
-      },
-    );
+        )
+    };
   }
 
   /// the composite of all the components for the option at index