autofocus, focus, blur to all form controls

FeodorFitsner · FeodorFitsner · commit 82e04d760bfb · 2022-04-29T15:05:27.000-07:00
diff --git a/client/lib/controls/checkbox.dart b/client/lib/controls/checkbox.dart
@@ -28,10 +28,17 @@ class CheckboxControl extends StatefulWidget {
 
 class _CheckboxControlState extends State<CheckboxControl> {
   bool? _value;
+  final FocusNode _focusNode = FocusNode();
 
   @override
   void initState() {
     super.initState();
+    _focusNode.addListener(() {
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: _focusNode.hasFocus ? "focus" : "blur",
+          eventData: "");
+    });
   }
 
   @override
@@ -50,6 +57,7 @@ class _CheckboxControlState extends State<CheckboxControl> {
             widget.control.attrString("labelPosition", "")!.toLowerCase(),
         orElse: () => LabelPosition.right);
     bool tristate = widget.control.attrBool("tristate", false)!;
+    bool autofocus = widget.control.attrBool("autofocus", false)!;
     bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
     return StoreConnector<AppState, Function>(
@@ -66,7 +74,7 @@ class _CheckboxControlState extends State<CheckboxControl> {
 
           onChange(bool? value) {
             var svalue = value != null ? value.toString() : "";
-            debugPrint(svalue);
+            //debugPrint(svalue);
             setState(() {
               _value = value;
             });
@@ -83,6 +91,8 @@ class _CheckboxControlState extends State<CheckboxControl> {
           }
 
           var checkbox = Checkbox(
+              autofocus: autofocus,
+              focusNode: _focusNode,
               value: _value,
               tristate: tristate,
               onChanged: !disabled
diff --git a/client/lib/controls/dropdown.dart b/client/lib/controls/dropdown.dart
@@ -28,6 +28,18 @@ class DropdownControl extends StatefulWidget {
 
 class _DropdownControlState extends State<DropdownControl> {
   String? _value;
+  final FocusNode _focusNode = FocusNode();
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode.addListener(() {
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: _focusNode.hasFocus ? "focus" : "blur",
+          eventData: "");
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -41,6 +53,7 @@ class _DropdownControlState extends State<DropdownControl> {
         builder: (context, itemsView) {
           debugPrint("Dropdown StoreConnector build: ${widget.control.id}");
 
+          bool autofocus = widget.control.attrBool("autofocus", false)!;
           bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
           String? value = widget.control.attrString("value");
@@ -54,6 +67,8 @@ class _DropdownControlState extends State<DropdownControl> {
               itemsView.children.where((c) => c.name == "suffix");
 
           var dropDown = DropdownButtonFormField<String>(
+            autofocus: autofocus,
+            focusNode: _focusNode,
             value: _value,
             decoration: buildInputDecoration(
                 widget.control,
diff --git a/client/lib/controls/elevated_button.dart b/client/lib/controls/elevated_button.dart
@@ -29,6 +29,7 @@ class ElevatedButtonControl extends StatelessWidget {
     Color? iconColor =
         HexColor.fromString(context, control.attrString("iconColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
+    bool autofocus = control.attrBool("autofocus", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     Function()? onPressed = disabled
@@ -45,6 +46,7 @@ class ElevatedButtonControl extends StatelessWidget {
 
     if (icon != null) {
       button = ElevatedButton.icon(
+          autofocus: autofocus,
           onPressed: onPressed,
           icon: Icon(
             icon,
@@ -53,6 +55,7 @@ class ElevatedButtonControl extends StatelessWidget {
           label: Text(text));
     } else if (contentCtrls.isNotEmpty) {
       button = ElevatedButton(
+          autofocus: autofocus,
           onPressed: onPressed,
           child: createControl(control, contentCtrls.first.id, disabled));
     } else {
diff --git a/client/lib/controls/floating_action_button.dart b/client/lib/controls/floating_action_button.dart
@@ -30,6 +30,7 @@ class FloatingActionButtonControl extends StatelessWidget {
     Color? bgColor =
         HexColor.fromString(context, control.attrString("bgColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
+    bool autofocus = control.attrBool("autofocus", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     Function()? onPressed = disabled
@@ -49,16 +50,19 @@ class FloatingActionButtonControl extends StatelessWidget {
     Widget button;
     if (contentCtrls.isNotEmpty) {
       button = FloatingActionButton(
+          autofocus: autofocus,
           onPressed: onPressed,
           child: createControl(control, contentCtrls.first.id, disabled));
     } else if (icon != null && text == null) {
       button = FloatingActionButton(
+        autofocus: autofocus,
         onPressed: onPressed,
         child: Icon(icon),
         backgroundColor: bgColor,
       );
     } else if (icon != null && text != null) {
       button = FloatingActionButton.extended(
+          autofocus: autofocus,
           onPressed: onPressed,
           label: Text(text),
           icon: Icon(icon),
diff --git a/client/lib/controls/icon_button.dart b/client/lib/controls/icon_button.dart
@@ -30,6 +30,7 @@ class IconButtonControl extends StatelessWidget {
         HexColor.fromString(context, control.attrString("iconColor", "")!);
     double? iconSize = control.attrDouble("iconSize");
     var contentCtrls = children.where((c) => c.name == "content");
+    bool autofocus = control.attrBool("autofocus", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     Function()? onPressed = disabled
@@ -46,6 +47,7 @@ class IconButtonControl extends StatelessWidget {
 
     if (icon != null) {
       button = IconButton(
+          autofocus: autofocus,
           icon: Icon(
             icon,
             color: iconColor,
@@ -54,6 +56,7 @@ class IconButtonControl extends StatelessWidget {
           onPressed: onPressed);
     } else if (contentCtrls.isNotEmpty) {
       button = IconButton(
+          autofocus: autofocus,
           onPressed: onPressed,
           iconSize: iconSize,
           icon: createControl(control, contentCtrls.first.id, disabled));
diff --git a/client/lib/controls/outlined_button.dart b/client/lib/controls/outlined_button.dart
@@ -29,6 +29,7 @@ class OutlinedButtonControl extends StatelessWidget {
     Color? iconColor =
         HexColor.fromString(context, control.attrString("iconColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
+    bool autofocus = control.attrBool("autofocus", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     Function()? onPressed = disabled
@@ -45,6 +46,7 @@ class OutlinedButtonControl extends StatelessWidget {
 
     if (icon != null) {
       button = OutlinedButton.icon(
+          autofocus: autofocus,
           onPressed: onPressed,
           icon: Icon(
             icon,
@@ -53,6 +55,7 @@ class OutlinedButtonControl extends StatelessWidget {
           label: Text(text));
     } else if (contentCtrls.isNotEmpty) {
       button = OutlinedButton(
+          autofocus: autofocus,
           onPressed: onPressed,
           child: createControl(control, contentCtrls.first.id, disabled));
     } else {
diff --git a/client/lib/controls/radio.dart b/client/lib/controls/radio.dart
@@ -30,9 +30,17 @@ class RadioControl extends StatefulWidget {
 }
 
 class _RadioControlState extends State<RadioControl> {
+  final FocusNode _focusNode = FocusNode();
+
   @override
   void initState() {
     super.initState();
+    _focusNode.addListener(() {
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: _focusNode.hasFocus ? "focus" : "blur",
+          eventData: "");
+    });
   }
 
   @override
@@ -51,6 +59,7 @@ class _RadioControlState extends State<RadioControl> {
             p.name.toLowerCase() ==
             widget.control.attrString("labelPosition", "")!.toLowerCase(),
         orElse: () => LabelPosition.right);
+    bool autofocus = widget.control.attrBool("autofocus", false)!;
     bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
     return StoreConnector<AppState, ControlAncestorViewModel>(
@@ -83,6 +92,8 @@ class _RadioControlState extends State<RadioControl> {
           }
 
           var radio = Radio<String>(
+              autofocus: autofocus,
+              focusNode: _focusNode,
               groupValue: groupValue,
               value: value,
               onChanged: !disabled
diff --git a/client/lib/controls/slider.dart b/client/lib/controls/slider.dart
@@ -29,10 +29,17 @@ class SliderControl extends StatefulWidget {
 class _SliderControlState extends State<SliderControl> {
   double _value = 0;
   Timer? _debounce;
+  final FocusNode _focusNode = FocusNode();
 
   @override
   void initState() {
     super.initState();
+    _focusNode.addListener(() {
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: _focusNode.hasFocus ? "focus" : "blur",
+          eventData: "");
+    });
   }
 
   @override
@@ -68,6 +75,7 @@ class _SliderControlState extends State<SliderControl> {
     debugPrint("SliderControl build: ${widget.control.id}");
 
     String? label = widget.control.attrString("label");
+    bool autofocus = widget.control.attrBool("autofocus", false)!;
     bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
     double min = widget.control.attrDouble("min", 0)!;
@@ -87,6 +95,8 @@ class _SliderControlState extends State<SliderControl> {
           }
 
           var slider = Slider(
+              autofocus: autofocus,
+              focusNode: _focusNode,
               value: _value,
               min: min,
               max: max,
diff --git a/client/lib/controls/switch.dart b/client/lib/controls/switch.dart
@@ -28,10 +28,17 @@ class SwitchControl extends StatefulWidget {
 
 class _SwitchControlState extends State<SwitchControl> {
   bool _value = false;
+  final FocusNode _focusNode = FocusNode();
 
   @override
   void initState() {
     super.initState();
+    _focusNode.addListener(() {
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: _focusNode.hasFocus ? "focus" : "blur",
+          eventData: "");
+    });
   }
 
   @override
@@ -49,6 +56,7 @@ class _SwitchControlState extends State<SwitchControl> {
             p.name.toLowerCase() ==
             widget.control.attrString("labelPosition", "")!.toLowerCase(),
         orElse: () => LabelPosition.right);
+    bool autofocus = widget.control.attrBool("autofocus", false)!;
     bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
     return StoreConnector<AppState, Function>(
@@ -81,6 +89,8 @@ class _SwitchControlState extends State<SwitchControl> {
           }
 
           var swtch = Switch(
+              autofocus: autofocus,
+              focusNode: _focusNode,
               value: _value,
               onChanged: !disabled
                   ? (bool value) {
diff --git a/client/lib/controls/text_button.dart b/client/lib/controls/text_button.dart
@@ -29,6 +29,7 @@ class TextButtonControl extends StatelessWidget {
     Color? iconColor =
         HexColor.fromString(context, control.attrString("iconColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
+    bool autofocus = control.attrBool("autofocus", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     Function()? onPressed = disabled
@@ -45,6 +46,7 @@ class TextButtonControl extends StatelessWidget {
 
     if (icon != null) {
       button = TextButton.icon(
+          autofocus: autofocus,
           onPressed: onPressed,
           icon: Icon(
             icon,
@@ -53,6 +55,7 @@ class TextButtonControl extends StatelessWidget {
           label: Text(text));
     } else if (contentCtrls.isNotEmpty) {
       button = TextButton(
+          autofocus: autofocus,
           onPressed: onPressed,
           child: createControl(control, contentCtrls.first.id, disabled));
     } else {
diff --git a/client/lib/controls/textfield.dart b/client/lib/controls/textfield.dart
@@ -32,8 +32,9 @@ class _TextFieldControlState extends State<TextFieldControl> {
   String _value = "";
   bool _revealPassword = false;
   late TextEditingController _controller;
+  final FocusNode _focusNode = FocusNode();
 
-  late final _focusNode = FocusNode(
+  late final _shiftEnterfocusNode = FocusNode(
     onKey: (FocusNode node, RawKeyEvent evt) {
       if (!evt.isShiftPressed && evt.logicalKey.keyLabel == 'Enter') {
         if (evt is RawKeyDownEvent) {
@@ -53,6 +54,18 @@ class _TextFieldControlState extends State<TextFieldControl> {
   void initState() {
     super.initState();
     _controller = TextEditingController();
+    _shiftEnterfocusNode.addListener(() {
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: _shiftEnterfocusNode.hasFocus ? "focus" : "blur",
+          eventData: "");
+    });
+    _focusNode.addListener(() {
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: _focusNode.hasFocus ? "focus" : "blur",
+          eventData: "");
+    });
   }
 
   @override
@@ -65,6 +78,7 @@ class _TextFieldControlState extends State<TextFieldControl> {
   Widget build(BuildContext context) {
     debugPrint("TextField build: ${widget.control.id}");
 
+    bool autofocus = widget.control.attrBool("autofocus", false)!;
     bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
     return StoreConnector<AppState, Function>(
@@ -122,6 +136,7 @@ class _TextFieldControlState extends State<TextFieldControl> {
           );
 
           var textField = TextFormField(
+              autofocus: autofocus,
               enabled: !disabled,
               decoration: buildInputDecoration(
                   widget.control,
@@ -136,8 +151,8 @@ class _TextFieldControlState extends State<TextFieldControl> {
               obscureText: password && !_revealPassword,
               controller: _controller,
               focusNode: keyboardType == TextInputType.multiline && shiftEnter
-                  ? _focusNode
-                  : null,
+                  ? _shiftEnterfocusNode
+                  : _focusNode,
               onChanged: (String value) {
                 debugPrint(value);
                 setState(() {
diff --git a/docs/roadmap.md b/docs/roadmap.md
