Text input Update (bdlukaa#179)

Author: dev-hann

CHANGELOG.md

@@ -1,5 +1,18 @@
 Date format: DD/MM/YYYY
 
+## [unreleased] - Input Update
+
+- `TextBox` updates: ([#179](https://github.com/bdlukaa/fluent_ui/pull/179))
+  - Correctly apply the `style` property
+  - Correctly apply `decoration` to the background
+  - Added `foregroundDecoration` and `highlightColor` property. They can not be specified at the same time
+  - **BREAKING** replaced `maxLengthEnforeced` with `maxLengthEnforcement`
+- Expose more propertied to `TextFormBox`
+- `AutoSuggestBox` updates:
+  - Improved fidelity of the suggestions overlay
+  - When a suggestion is picked, the overlay is automatically closed and the text box is unfocused
+  - Clear button now only shows when the text box is focused
+
 ## [3.9.0] - Fidelity - [10/02/2022]
 
 - **BREAKING** Renamed `standartCurve` to `standardCurve`

example/lib/screens/forms.dart

@@ -35,6 +35,20 @@ class _FormsState extends State<Forms> {
 
   DateTime date = DateTime.now();
 
+  @override
+  void initState() {
+    super.initState();
+    _clearController.addListener(() {
+      if (_clearController.text.length == 1 && mounted) setState(() {});
+    });
+  }
+
+  @override
+  void dispose() {
+    _clearController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ScaffoldPage.scrollable(
@@ -57,10 +71,11 @@ class _FormsState extends State<Forms> {
         ),
         const SizedBox(height: 20),
         Row(children: [
-          const Expanded(
+          Expanded(
             child: TextBox(
               readOnly: true,
               placeholder: 'Read only text box',
+              highlightColor: Colors.magenta,
             ),
           ),
           const SizedBox(width: 10),
@@ -93,12 +108,14 @@ class _FormsState extends State<Forms> {
           controller: _clearController,
           suffixMode: OverlayVisibilityMode.always,
           minHeight: 100,
-          suffix: IconButton(
-            icon: const Icon(FluentIcons.chrome_close),
-            onPressed: () {
-              _clearController.clear();
-            },
-          ),
+          suffix: _clearController.text.isEmpty
+              ? null
+              : IconButton(
+                  icon: const Icon(FluentIcons.chrome_close),
+                  onPressed: () {
+                    _clearController.clear();
+                  },
+                ),
           placeholder: 'Text box with clear button',
         ),
         const SizedBox(height: 20),

example/pubspec.lock

@@ -205,13 +205,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.12.11"
-  material_color_utilities:
-    dependency: transitive
-    description:
-      name: material_color_utilities
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.1.3"
   meta:
     dependency: transitive
     description:
@@ -328,7 +321,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.8"
+    version: "0.4.3"
   typed_data:
     dependency: transitive
     description:

lib/src/controls/form/auto_suggest_box.dart

@@ -109,6 +109,8 @@ class _AutoSuggestBoxState<T> extends State<AutoSuggestBox> {
 
   late TextEditingController controller;
 
+  final FocusScopeNode overlayNode = FocusScopeNode();
+
   @override
   void initState() {
     super.initState();
@@ -153,6 +155,7 @@ class _AutoSuggestBoxState<T> extends State<AutoSuggestBox> {
           child: SizedBox(
             width: box.size.width,
             child: _AutoSuggestBoxOverlay(
+              node: overlayNode,
               controller: controller,
               items: widget.items,
               onSelected: (String item) {
@@ -162,6 +165,11 @@ class _AutoSuggestBoxState<T> extends State<AutoSuggestBox> {
                   offset: item.length,
                 );
                 widget.onChanged?.call(item, TextChangedReason.userInput);
+
+                // After selected, the overlay is dismissed and the text box is
+                // unfocused
+                _dismissOverlay();
+                focusNode.unfocus();
               },
             ),
           ),
@@ -195,59 +203,77 @@ class _AutoSuggestBoxState<T> extends State<AutoSuggestBox> {
 
     return CompositedTransformTarget(
       link: _layerLink,
-      child: TextBox(
-        key: _textBoxKey,
-        controller: controller,
-        focusNode: focusNode,
-        placeholder: widget.placeholder,
-        placeholderStyle: widget.placeholderStyle,
-        clipBehavior: _entry != null ? Clip.none : Clip.antiAliasWithSaveLayer,
-        suffix: Row(children: [
-          if (widget.trailingIcon != null) widget.trailingIcon!,
-          if (widget.clearButtonEnabled && controller.text.isNotEmpty)
-            Padding(
-              padding: const EdgeInsets.only(left: 2.0),
-              child: IconButton(
-                icon: const Icon(FluentIcons.chrome_close),
-                onPressed: () {
-                  controller.clear();
-                  focusNode.unfocus();
-                },
-              ),
-            ),
-        ]),
-        suffixMode: OverlayVisibilityMode.always,
-        onChanged: (text) {
-          widget.onChanged?.call(text, TextChangedReason.userInput);
-          _showOverlay();
+      child: Actions(
+        actions: {
+          DirectionalFocusIntent: _DirectionalFocusAction(),
         },
+        child: TextBox(
+          key: _textBoxKey,
+          controller: controller,
+          focusNode: focusNode,
+          placeholder: widget.placeholder,
+          placeholderStyle: widget.placeholderStyle,
+          clipBehavior:
+              _entry != null ? Clip.none : Clip.antiAliasWithSaveLayer,
+          suffix: Row(children: [
+            if (widget.trailingIcon != null) widget.trailingIcon!,
+            if (widget.clearButtonEnabled &&
+                controller.text.isNotEmpty &&
+                focusNode.hasFocus)
+              Padding(
+                padding: const EdgeInsets.only(left: 2.0),
+                child: IconButton(
+                  icon: const Icon(FluentIcons.chrome_close),
+                  onPressed: () {
+                    controller.clear();
+                    focusNode.unfocus();
+                  },
+                ),
+              ),
+          ]),
+          suffixMode: OverlayVisibilityMode.always,
+          onChanged: (text) {
+            widget.onChanged?.call(text, TextChangedReason.userInput);
+            _showOverlay();
+          },
+        ),
       ),
     );
   }
 }
 
+class _DirectionalFocusAction extends DirectionalFocusAction {
+  @override
+  void invoke(covariant DirectionalFocusIntent intent) {
+    // if (!intent.ignoreTextFields || !_isForTextField) {
+    //   primaryFocus!.focusInDirection(intent.direction);
+    // }
+    debugPrint(intent.direction.toString());
+  }
+}
+
 class _AutoSuggestBoxOverlay extends StatelessWidget {
   const _AutoSuggestBoxOverlay({
     Key? key,
     required this.items,
     required this.controller,
     required this.onSelected,
+    required this.node,
   }) : super(key: key);
 
   final List items;
   final TextEditingController controller;
   final ValueChanged<String> onSelected;
+  final FocusScopeNode node;
 
   @override
   Widget build(BuildContext context) {
     final theme = FluentTheme.of(context);
     final localizations = FluentLocalizations.of(context);
     return FocusScope(
-      autofocus: true,
+      node: node,
       child: Container(
-        constraints: const BoxConstraints(
-          maxHeight: 385,
-        ),
+        constraints: const BoxConstraints(maxHeight: 380),
         decoration: ShapeDecoration(
           shape: RoundedRectangleBorder(
             borderRadius: const BorderRadius.vertical(
@@ -281,9 +307,7 @@ class _AutoSuggestBoxOverlay extends StatelessWidget {
                   final item = items[index];
                   return _AutoSuggestBoxOverlayTile(
                     text: '$item',
-                    onSelected: () {
-                      onSelected(item);
-                    },
+                    onSelected: () => onSelected(item),
                   );
                 }),
               );
@@ -314,6 +338,7 @@ class _AutoSuggestBoxOverlayTile extends StatefulWidget {
 class __AutoSuggestBoxOverlayTileState extends State<_AutoSuggestBoxOverlayTile>
     with SingleTickerProviderStateMixin {
   late AnimationController controller;
+  final node = FocusNode();
 
   @override
   void initState() {
@@ -328,19 +353,21 @@ class __AutoSuggestBoxOverlayTileState extends State<_AutoSuggestBoxOverlayTile>
   @override
   void dispose() {
     controller.dispose();
+    node.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
     final theme = FluentTheme.of(context);
     return HoverButton(
+      focusNode: node,
       onPressed: widget.onSelected,
       margin: const EdgeInsets.only(top: 4.0, left: 4.0, right: 4.0),
       builder: (context, states) => Stack(
         children: [
           Container(
-            height: 40.0,
+            height: 36.0,
             padding: const EdgeInsets.symmetric(horizontal: 10.0),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(6.0),

lib/src/controls/form/form_row.dart

@@ -42,7 +42,8 @@ class FormRow extends StatelessWidget {
               ),
             ),
           if (error != null)
-            Align(
+            Container(
+              margin: const EdgeInsets.only(top: 2.0),
               alignment: AlignmentDirectional.centerStart,
               child: DefaultTextStyle(
                 style: const TextStyle(