Add right arrow to complete FAutocompelte & toggle to hide hint in FMultiSelect (#650)

* Hide hint

* Add autocomplete right arrow to complete

* Prepare Forui for review

* Update windows-latest goldens

---------

Co-authored-by: Pante <[email protected]>

Author: Pante

docs/app/docs/form/autocomplete/page.mdx

@@ -65,6 +65,7 @@ FAutocomplete(
   suffixBuilder: (context, style, states) => Icon(FIcons.search),
   popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400),
   clearable: (value) => value.text.isNotEmpty,
+  rightArrowToComplete: true,
   initialText: 'Canada',
   items: [
     'United States',
@@ -101,6 +102,7 @@ FAutocomplete.builder(
   prefixBuilder: (context, style, states) => Icon(FIcons.globe),
   suffixBuilder: (context, style, states) => Icon(FIcons.search),
   popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 300),
+  rightArrowToComplete: true,
   clearable: (value) => value.text.isNotEmpty,
 );
 ```

docs/app/docs/form/multi-select/page.mdx

@@ -81,6 +81,7 @@ FMultiSelect<Locale>(
   label: const Text('Country'),
   description: const Text('Select your country of residence'),
   hint: Text('Choose a country'),
+  keepHint: true,
   format: (value) => Text(value.toUpperCase()),
   sort: (a, b) => a.compareTo(b),
   onChange: (value) => print('Selected country: $value'),
@@ -107,6 +108,7 @@ FMultiSelect<String>.rich(
   label: const Text('Country'),
   description: const Text('Select your country of residence'),
   hint: Text('Choose a country'),
+  keepHint: true,
   format: (value) => Text(value.toUpperCase()),
   sort: (a, b) => a.compareTo(b),
   onChange: (value) => print('Selected country: $value'),

forui/lib/src/widgets/autocomplete/autocomplete.dart

@@ -276,6 +276,10 @@ class FAutocomplete extends StatefulWidget with FFormFieldProperties<String> {
   /// Defaults to returning the given child.
   final FFieldBuilder<FAutocompleteStyle> builder;
 
+  /// Whether the autocomplete should complete the text when a completion is available and the user presses right arrow.
+  /// Defaults to false.
+  final bool rightArrowToComplete;
+
   /// A callback that produces a list of items based on the query either synchronously or asynchronously.
   final FutureOr<Iterable<String>> Function(String text) filter;
 
@@ -377,6 +381,7 @@ class FAutocomplete extends StatefulWidget with FFormFieldProperties<String> {
     FPopoverHideRegion hideRegion = FPopoverHideRegion.excludeChild,
     bool autoHide = true,
     FFieldBuilder<FAutocompleteStyle> builder = _builder,
+    bool rightArrowToComplete = false,
     FutureOr<Iterable<String>> Function(String)? filter,
     FAutoCompleteContentBuilder? contentBuilder,
     ScrollController? contentScrollController,
@@ -463,6 +468,7 @@ class FAutocomplete extends StatefulWidget with FFormFieldProperties<String> {
          hideRegion: hideRegion,
          autoHide: autoHide,
          builder: builder,
+         rightArrowToComplete: rightArrowToComplete,
          contentScrollController: contentScrollController,
          contentPhysics: contentPhysics,
          contentDivider: contentDivider,
@@ -549,6 +555,7 @@ class FAutocomplete extends StatefulWidget with FFormFieldProperties<String> {
     this.hideRegion = FPopoverHideRegion.excludeChild,
     this.autoHide = true,
     this.builder = _builder,
+    this.rightArrowToComplete = false,
     this.contentScrollController,
     this.contentPhysics = const ClampingScrollPhysics(),
     this.contentDivider = FItemDivider.none,
@@ -648,6 +655,7 @@ class FAutocomplete extends StatefulWidget with FFormFieldProperties<String> {
       ..add(ObjectFlagProperty.has('onTapHide', onTapHide))
       ..add(FlagProperty('autoHide', value: autoHide, ifTrue: 'autoHide'))
       ..add(ObjectFlagProperty.has('builder', builder))
+      ..add(FlagProperty('rightArrowToComplete', value: rightArrowToComplete, ifTrue: 'rightArrowToComplete'))
       ..add(ObjectFlagProperty.has('filter', filter))
       ..add(ObjectFlagProperty.has('contentEmptyBuilder', contentEmptyBuilder))
       ..add(DiagnosticsProperty('contentScrollController', contentScrollController))
@@ -875,20 +883,24 @@ class _State extends State<FAutocomplete> with SingleTickerProviderStateMixin {
               const SingleActivator(LogicalKeyboardKey.arrowDown): () =>
                   _popoverFocus.descendants.firstOrNull?.requestFocus(),
               if (_controller.current case (:final replacement, completion: final _))
-                const SingleActivator(LogicalKeyboardKey.tab): () {
-                  if (widget.autoHide) {
-                    _controller.popover.hide();
-                  }
-                  _previous = replacement;
-                  _controller.complete();
-                },
+                const SingleActivator(LogicalKeyboardKey.tab): () => _complete(replacement),
+              if (_controller.current case (:final replacement, completion: final _) when widget.rightArrowToComplete)
+                const SingleActivator(LogicalKeyboardKey.arrowRight): () => _complete(replacement),
             },
             child: widget.builder(context, style, states, field),
           ),
         ),
       ),
     );
   }
+
+  void _complete(String replacement) {
+    if (widget.autoHide) {
+      _controller.popover.hide();
+    }
+    _previous = replacement;
+    _controller.complete();
+  }
 }
 
 /// An [FAutocomplete]'s style.

forui/lib/src/widgets/select/multi/field.dart

@@ -21,6 +21,7 @@ class Field<T> extends FormField<Set<T>> {
   final Widget? label;
   final Widget? description;
   final Widget? hint;
+  final bool keepHint;
   final int Function(T, T)? sort;
   final Widget Function(T) format;
   final FMultiSelectTagBuilder<T> tagBuilder;
@@ -49,6 +50,7 @@ class Field<T> extends FormField<Set<T>> {
     required this.label,
     required this.description,
     required this.hint,
+    required this.keepHint,
     required this.sort,
     required this.format,
     required this.tagBuilder,
@@ -141,13 +143,14 @@ class Field<T> extends FormField<Set<T>> {
                                      children: [
                                        for (final value in values)
                                          tagBuilder(context, state._controller, style, value, format(value)),
-                                       Padding(
-                                         padding: style.fieldStyle.hintPadding,
-                                         child: DefaultTextStyle.merge(
-                                           style: style.fieldStyle.hintTextStyle.resolve(states),
-                                           child: hint ?? Text(localizations.multiSelectHint),
+                                       if (keepHint || state._controller.value.isEmpty)
+                                         Padding(
+                                           padding: style.fieldStyle.hintPadding,
+                                           child: DefaultTextStyle.merge(
+                                             style: style.fieldStyle.hintTextStyle.resolve(states),
+                                             child: hint ?? Text(localizations.multiSelectHint),
+                                           ),
                                          ),
-                                       ),
                                      ],
                                    ),
                                  ),
@@ -199,6 +202,7 @@ class Field<T> extends FormField<Set<T>> {
       ..add(EnumProperty('autovalidateMode', autovalidateMode))
       ..add(StringProperty('forceErrorText', forceErrorText))
       ..add(ObjectFlagProperty.has('validator', validator))
+      ..add(FlagProperty('keepHint', value: keepHint, ifTrue: 'keepHint'))
       ..add(ObjectFlagProperty.has('sort', sort))
       ..add(ObjectFlagProperty.has('format', format))
       ..add(ObjectFlagProperty.has('tagBuilder', tagBuilder))

forui/lib/src/widgets/select/multi/select.dart

@@ -123,6 +123,9 @@ abstract class FMultiSelect<T> extends StatelessWidget {
   /// The hint.
   final Widget? hint;
 
+  /// Whether to keep the hint visible when there are selected items. Defaults to true.
+  final bool keepHint;
+
   /// The function used to sort the selected items. Defaults to the order in which they were selected.
   final int Function(T, T)? sort;
 
@@ -220,6 +223,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
     String? Function(Set<T>) validator = _defaultValidator,
     Widget Function(BuildContext, String) errorBuilder = FFormFieldProperties.defaultErrorBuilder,
     Widget? hint,
+    bool keepHint = true,
     int Function(T, T)? sort,
     Widget Function(BuildContext, FMultiSelectController<T>, FMultiSelectStyle, T, Widget)? tagBuilder,
     TextAlign textAlign = TextAlign.start,
@@ -263,6 +267,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
       validator: validator,
       errorBuilder: errorBuilder,
       hint: hint,
+      keepHint: keepHint,
       textAlign: textAlign,
       textDirection: textDirection,
       clearable: clearable,
@@ -306,6 +311,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
     String? Function(Set<T>) validator,
     Widget Function(BuildContext, String) errorBuilder,
     Widget? hint,
+    bool keepHint,
     int Function(T, T)? sort,
     FMultiSelectTagBuilder<T>? tagBuilder,
     TextAlign textAlign,
@@ -366,6 +372,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
     String? Function(Set<T>) validator = _defaultValidator,
     Widget Function(BuildContext, String) errorBuilder = FFormFieldProperties.defaultErrorBuilder,
     Widget? hint,
+    bool keepHint = true,
     int Function(T, T)? sort,
     FMultiSelectTagBuilder<T>? tagBuilder,
     TextAlign textAlign = TextAlign.start,
@@ -419,6 +426,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
       validator: validator,
       errorBuilder: errorBuilder,
       hint: hint,
+      keepHint: keepHint,
       sort: sort,
       tagBuilder: tagBuilder,
       textAlign: textAlign,
@@ -475,6 +483,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
     String? Function(Set<T>) validator,
     Widget Function(BuildContext, String) errorBuilder,
     Widget? hint,
+    bool keepHint,
     int Function(T, T)? sort,
     FMultiSelectTagBuilder<T>? tagBuilder,
     TextAlign textAlign,
@@ -516,6 +525,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
     this.validator = _defaultValidator,
     this.errorBuilder = FFormFieldProperties.defaultErrorBuilder,
     this.hint,
+    this.keepHint = true,
     this.sort,
     this.textAlign = TextAlign.start,
     this.textDirection,
@@ -568,6 +578,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
       description: description,
       onChange: onChange,
       hint: hint,
+      keepHint: keepHint,
       sort: sort,
       format: format,
       tagBuilder: tagBuilder,
@@ -615,6 +626,7 @@ abstract class FMultiSelect<T> extends StatelessWidget {
       ..add(ObjectFlagProperty.has('sort', sort))
       ..add(ObjectFlagProperty.has('tagBuilder', tagBuilder))
       ..add(StringProperty('forceErrorText', forceErrorText))
+      ..add(FlagProperty('keepHint', value: keepHint, ifTrue: 'keepHint'))
       ..add(ObjectFlagProperty.has('validator', validator))
       ..add(EnumProperty('textAlign', textAlign))
       ..add(EnumProperty('textDirection', textDirection))
@@ -659,6 +671,7 @@ class _BasicSelect<T> extends FMultiSelect<T> {
     super.validator,
     super.errorBuilder,
     super.hint,
+    super.keepHint,
     super.sort,
     super.textAlign,
     super.textDirection,
@@ -731,6 +744,7 @@ class _SearchSelect<T> extends FMultiSelect<T> {
     super.validator,
     super.errorBuilder,
     super.hint,
+    super.keepHint,
     super.sort,
     super.textAlign,
     super.textDirection,

forui/test/golden/macos/multi-select/hide-hint-selected.png

@@ -171,6 +171,68 @@ void main() {
     });
   });
 
+  group('right arrow completion', () {
+    testWidgets('right arrow does nothing', (tester) async {
+      final autocompleteFocus = autoDispose(FocusNode());
+      final buttonFocus = autoDispose(FocusNode());
+
+      await tester.pumpWidget(
+        TestScaffold.app(
+          child: Column(
+            children: [
+              FAutocomplete(key: key, controller: controller, focusNode: autocompleteFocus, items: fruits),
+              FButton(onPress: () {}, focusNode: buttonFocus, child: const Text('button')),
+            ],
+          ),
+        ),
+      );
+
+      await tester.enterText(find.byKey(key), 'b');
+      await tester.pumpAndSettle();
+
+      await tester.sendKeyEvent(LogicalKeyboardKey.arrowRight);
+      await tester.pumpAndSettle();
+
+      expect(controller.popover.status.isForwardOrCompleted, true);
+      expect(autocompleteFocus.hasFocus, true);
+      expect(buttonFocus.hasFocus, false);
+      expect(find.text('b'), findsOne);
+    });
+
+    testWidgets('right arrow when completion available completes text', (tester) async {
+      final autocompleteFocus = autoDispose(FocusNode());
+      final buttonFocus = autoDispose(FocusNode());
+
+      await tester.pumpWidget(
+        TestScaffold.app(
+          child: Column(
+            children: [
+              FAutocomplete(
+                key: key,
+                controller: controller,
+                focusNode: autocompleteFocus,
+                rightArrowToComplete: true,
+                items: fruits,
+              ),
+              FButton(onPress: () {}, focusNode: buttonFocus, child: const Text('button')),
+            ],
+          ),
+        ),
+      );
+
+      await tester.enterText(find.byKey(key), 'b');
+      await tester.pumpAndSettle();
+
+      await tester.sendKeyEvent(LogicalKeyboardKey.arrowRight);
+      await tester.pumpAndSettle();
+
+      expect(controller.popover.status.isForwardOrCompleted, false);
+      expect(autocompleteFocus.hasFocus, true);
+      expect(buttonFocus.hasFocus, false);
+      expect(find.text('Banana'), findsOne);
+    });
+  });
+
   group('keyboard navigation', () {
     testWidgets('arrow key navigation & selection', (tester) async {
       final focus = autoDispose(FocusNode());