Merge pull request #1866 from EnsembleUI/radio-focus

Added focus and Scroll for Radio Group & Dropdown

Author: mehsaandev

modules/ensemble/lib/widget/input/dropdown.dart

@@ -297,10 +297,26 @@ class SelectOneState extends FormFieldWidgetState<SelectOne>
     });*/
     widget.controller.textEditingController =
         TextEditingController(text: widget.getValue());
+    focusNode.addListener(_handleFocusChange);
 
     super.initState();
   }
 
+  void _handleFocusChange() {
+      // If gaining focus, scroll into view
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          final context = validatorKey.currentContext;
+          if (context != null) {
+            Scrollable.ensureVisible(
+              context,
+              duration: const Duration(milliseconds: 300),
+              curve: Curves.easeInOut,
+              alignment: 0.5,
+            );
+          }
+        });
+  }
+
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();

modules/ensemble/lib/widget/radio/radio_group.dart

@@ -41,7 +41,10 @@ class RadioGroup extends StatefulWidget
 
   @override
   Map<String, Function> methods() {
-    return {};
+    return {
+      'focus': () => _controller.radioGroupAction?.focusInputField(),
+      'unfocus': () => _controller.radioGroupAction?.unfocusInputField(),
+    };
   }
 
   @override
@@ -73,7 +76,12 @@ class RadioGroup extends StatefulWidget
   }
 }
 
+mixin RadioGroupAction on FormFieldWidgetState<RadioGroup> {
+  void focusInputField();
+  void unfocusInputField();
+}
 class RadioGroupController extends FormFieldController {
+  RadioGroupAction? radioGroupAction;
   dynamic selectedValue;
 
   // list of string for items
@@ -101,12 +109,43 @@ class RadioGroupController extends FormFieldController {
 }
 
 class RadioGroupState extends FormFieldWidgetState<RadioGroup>
-    with TemplatedWidgetState {
+    with RadioGroupAction, TemplatedWidgetState {
   List? itemTemplateData;
+  FocusNode focusNode = FocusNode();
+
+  @override
+  void initState() {
+    super.initState();
+    focusNode.addListener(_handleFocusChange);
+  }
+
+  @override
+  void dispose() {
+    focusNode.removeListener(_handleFocusChange);
+    focusNode.dispose();
+    super.dispose();
+  }
+
+  void _handleFocusChange() {
+      // If gaining focus, scroll into view
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          final context = validatorKey.currentContext;
+          if (context != null) {
+            Scrollable.ensureVisible(
+              context,
+              duration: const Duration(milliseconds: 300),
+              curve: Curves.easeInOut,
+              alignment: 0.5,
+            );
+          }
+        });
+      
+  }
 
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
+    widget.controller.radioGroupAction = this;
 
     if (widget._controller.itemTemplate != null) {
       registerItemTemplate(context, widget._controller.itemTemplate!,
@@ -116,6 +155,20 @@ class RadioGroupState extends FormFieldWidgetState<RadioGroup>
     }
   }
 
+  @override
+  void focusInputField() {
+    if (!focusNode.hasFocus) {
+      focusNode.requestFocus();
+    }
+  }
+
+  @override
+  void unfocusInputField() {
+    if (focusNode.hasFocus) {
+      focusNode.unfocus();
+    }
+  }
+
   @override
   Widget buildWidget(BuildContext context) {
     // build the children and gap if applicable
@@ -159,7 +212,9 @@ class RadioGroupState extends FormFieldWidgetState<RadioGroup>
           return null;
         },
         builder: (FormFieldState<String> field) {
-          return InputDecorator(
+          return Focus(
+            focusNode: focusNode,
+            child: InputDecorator(
               decoration: inputDecoration.copyWith(
                   contentPadding: EdgeInsets.zero,
                   filled: false,
@@ -169,7 +224,8 @@ class RadioGroupState extends FormFieldWidgetState<RadioGroup>
                   focusedBorder: InputBorder.none,
                   errorText: field.errorText,
                   errorStyle: widget._controller.errorStyle ?? Theme.of(context).inputDecorationTheme.errorStyle),
-              child: rtn);
+              child: rtn),
+          );
         },
       ),
     );