TF-2717 Show text input field when click tag recipient item

lib/features/composer/presentation/composer_controller.dart

@@ -1472,12 +1472,15 @@ class ComposerController extends BaseController with DragDropFileMixin {
     switch(prefixEmailAddress) {
       case PrefixEmailAddress.to:
         toAddressExpandMode.value = ExpandMode.EXPAND;
+        toAddressFocusNode?.requestFocus();
         break;
       case PrefixEmailAddress.cc:
         ccAddressExpandMode.value = ExpandMode.EXPAND;
+        ccAddressFocusNode?.requestFocus();
         break;
       case PrefixEmailAddress.bcc:
         bccAddressExpandMode.value = ExpandMode.EXPAND;
+        bccAddressFocusNode?.requestFocus();
         break;
       default:
         break;

lib/features/composer/presentation/widgets/recipient_composer_widget.dart

@@ -192,6 +192,11 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                             onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, stateSetter),
                             onSubmitted: (value) => _handleSubmitTagAction.call(value, stateSetter),
                             onTapOutside: (_) {},
+                            onFocusTextInput: () {
+                              if (_isCollapse) {
+                                widget.onShowFullListEmailAddressAction?.call(widget.prefix);
+                              }
+                            },
                             inputDecoration: const InputDecoration(border: InputBorder.none),
                             tagBuilder: (context, index) {
                               final currentEmailAddress = _currentListEmailAddress[index];
@@ -271,6 +276,11 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                         onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, stateSetter),
                         onSubmitted: (value) => _handleSubmitTagAction.call(value, stateSetter),
                         onTapOutside: (_) {},
+                        onFocusTextInput: () {
+                          if (_isCollapse) {
+                            widget.onShowFullListEmailAddressAction?.call(widget.prefix);
+                          }
+                        },
                         inputDecoration: const InputDecoration(border: InputBorder.none),
                         tagBuilder: (context, index) {
                           final currentEmailAddress = _currentListEmailAddress[index];

lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart

@@ -1,7 +1,6 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/extensions/string_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/views/avatar/gradient_circle_avatar_icon.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
@@ -52,111 +51,68 @@ class RecipientTagItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    Widget tagWidget = Chip(
+      labelPadding: EdgeInsetsDirectional.symmetric(
+        horizontal: 4,
+        vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
+      ),
+      padding: EdgeInsets.zero,
+      label: Text(
+        key: Key('label_recipient_tag_item_${prefix.name}_$index'),
+        currentEmailAddress.asString(),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+        softWrap: true,
+      ),
+      deleteIcon: SvgPicture.asset(
+        imagePaths.icClose,
+        key: Key('delete_icon_recipient_tag_item_${prefix.name}_$index'),
+        fit: BoxFit.fill
+      ),
+      labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
+      backgroundColor: _getTagBackgroundColor(),
+      side: _getTagBorderSide(),
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
+      ),
+      avatar: currentEmailAddress.displayName.isNotEmpty
+        ? GradientCircleAvatarIcon(
+            key: Key('avatar_icon_recipient_tag_item_${prefix.name}_$index'),
+            colors: currentEmailAddress.avatarColors,
+            label: currentEmailAddress.displayName.firstLetterToUpperCase,
+            labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
+            iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
+          )
+        : null,
+      onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
+    );
+
+    if (PlatformInfo.isWeb || isTestingForWeb) {
+      tagWidget = Draggable<DraggableEmailAddress>(
+        data: DraggableEmailAddress(emailAddress: currentEmailAddress, prefix: prefix),
+        feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
+        childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
+        child: MouseRegion(
+          cursor: SystemMouseCursors.grab,
+          child: tagWidget,
+        ),
+      );
+    }
+
+    if ((PlatformInfo.isWeb || isTestingForWeb) && PlatformInfo.isCanvasKit) {
+      tagWidget = Padding(
+        padding: const EdgeInsetsDirectional.only(top: 8),
+        child: tagWidget,
+      );
+    }
+
     return Container(
       key: Key('recipient_tag_item_${prefix.name}_$index'),
       constraints: BoxConstraints(maxWidth: maxWidth ?? double.infinity),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          if (PlatformInfo.isWeb || isTestingForWeb)
+          Flexible(child: tagWidget),
-            Flexible(
-              child: Padding(
-                padding: EdgeInsetsDirectional.only(
-                  top: !PlatformInfo.isCanvasKit ? 0 : 8
-                ),
-                child: InkWell(
-                  onTap: () => isCollapsed
-                    ? onShowFullAction?.call(prefix)
-                    : null,
-                  child: Draggable<DraggableEmailAddress>(
-                    data: DraggableEmailAddress(emailAddress: currentEmailAddress, prefix: prefix),
-                    feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
-                    childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
-                    child: MouseRegion(
-                      cursor: SystemMouseCursors.grab,
-                      child: Chip(
-                        labelPadding: EdgeInsetsDirectional.symmetric(
-                          horizontal: 4,
-                          vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
-                        ),
-                        padding: EdgeInsets.zero,
-                        label: Text(
-                          key: Key('label_recipient_tag_item_${prefix.name}_$index'),
-                          currentEmailAddress.asString(),
-                          maxLines: 1,
-                          overflow: CommonTextStyle.defaultTextOverFlow,
-                          softWrap: CommonTextStyle.defaultSoftWrap,
-                        ),
-                        deleteIcon: SvgPicture.asset(
-                          imagePaths.icClose,
-                          key: Key('delete_icon_recipient_tag_item_${prefix.name}_$index'),
-                          fit: BoxFit.fill
-                        ),
-                        labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
-                        backgroundColor: _getTagBackgroundColor(),
-                        side: _getTagBorderSide(),
-                        shape: const RoundedRectangleBorder(
-                          borderRadius: BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
-                        ),
-                        avatar: currentEmailAddress.displayName.isNotEmpty
-                          ? GradientCircleAvatarIcon(
-                              key: Key('avatar_icon_recipient_tag_item_${prefix.name}_$index'),
-                              colors: currentEmailAddress.avatarColors,
-                              label: currentEmailAddress.displayName.firstLetterToUpperCase,
-                              labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
-                              iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
-                            )
-                          : null,
-                        onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
-                      ),
-                    ),
-                  )
-                ),
-              ),
-            )
-          else
-            Flexible(
-              child: InkWell(
-                onTap: () => isCollapsed
-                  ? onShowFullAction?.call(prefix)
-                  : null,
-                child: Chip(
-                  labelPadding: EdgeInsetsDirectional.symmetric(
-                    horizontal: 4,
-                    vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
-                  ),
-                  label: Text(
-                    key: Key('label_recipient_tag_item_${prefix.name}_$index'),
-                    currentEmailAddress.asString(),
-                    maxLines: 1,
-                    overflow: CommonTextStyle.defaultTextOverFlow,
-                    softWrap: CommonTextStyle.defaultSoftWrap,
-                  ),
-                  padding: EdgeInsets.zero,
-                  deleteIcon: SvgPicture.asset(
-                    imagePaths.icClose,
-                    key: Key('delete_icon_recipient_tag_item_${prefix.name}_$index'),
-                    fit: BoxFit.fill
-                  ),
-                  labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
-                  backgroundColor: _getTagBackgroundColor(),
-                  side: _getTagBorderSide(),
-                  shape: const RoundedRectangleBorder(
-                    borderRadius: BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
-                  ),
-                  avatar: currentEmailAddress.displayName.isNotEmpty
-                    ? GradientCircleAvatarIcon(
-                        key: Key('avatar_icon_recipient_tag_item_${prefix.name}_$index'),
-                        colors: currentEmailAddress.avatarColors,
-                        label: currentEmailAddress.displayName.firstLetterToUpperCase,
-                        labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
-                        iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
-                      )
-                    : null,
-                  onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
-                )
-              ),
-            ),
           if (isCollapsed)
             TMailButtonWidget.fromText(
               key: Key('counter_recipient_tag_item_${prefix.name}_$index'),

pubspec.lock

@@ -1738,7 +1738,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: f8f6470b9cf7d1d9b9b07752d9e09c558e9819a1
+      resolved-ref: "1954bb41a3a12899c426d17a7b1c9e561cccce06"
       url: "https://github.com/dab246/super_tag_editor.git"
     source: git
     version: "0.2.0"