TF-3704 Fix menu bounces when collapse/expand folder

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/mailbox/presentation/extensions/expand_mode_extension.dart

@@ -0,0 +1,26 @@
+
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+extension ExpandModeExtension on ExpandMode {
+  bool get isExpanded => this == ExpandMode.EXPAND;
+
+  ExpandMode toggle() => isExpanded ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
+
+  String getIcon(ImagePaths imagePaths, bool isDirectionRTL) {
+    if (isExpanded) {
+      return imagePaths.icArrowBottom;
+    } else {
+      return isDirectionRTL ? imagePaths.icArrowLeft : imagePaths.icArrowRight;
+    }
+  }
+
+  String getTooltipMessage(AppLocalizations appLocalizations) {
+    if (isExpanded) {
+      return appLocalizations.collapse;
+    } else {
+      return appLocalizations.expand;
+    }
+  }
+}

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -72,7 +72,6 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_multipl
 import 'package:tmail_ui_user/features/mailbox/presentation/action/mailbox_ui_action.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories_expand_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
@@ -1197,40 +1196,6 @@ class MailboxController extends BaseMailboxController
     }
   }
 
-  void toggleMailboxCategories(MailboxCategories categories) async {
-    switch(categories) {
-      case MailboxCategories.exchange:
-        final newExpandMode = mailboxCategoriesExpandMode.value.defaultMailbox == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.defaultMailbox = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        break;
-      case MailboxCategories.personalFolders:
-        final newExpandMode = mailboxCategoriesExpandMode.value.personalFolders == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.personalFolders = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        if (personalMailboxTree.value.root.hasChildren()) {
-          _triggerToggleMailboxCategories();
-        }
-        break;
-      case MailboxCategories.teamMailboxes:
-        final newExpandMode = mailboxCategoriesExpandMode.value.teamMailboxes == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.teamMailboxes = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        if (personalMailboxTree.value.root.hasChildren() && mailboxCategoriesExpandMode.value.teamMailboxes == ExpandMode.COLLAPSE) {
-          _triggerToggleMailboxCategories();
-        }
-        break;
-    }
-  }
-
-  void _triggerToggleMailboxCategories() async {
-    await Future.delayed(const Duration(milliseconds: 200));
-    mailboxListScrollController.animateTo(
-      mailboxListScrollController.offset + 100,
-      duration: const Duration(milliseconds: 200),
-      curve: Curves.easeInToLinear);
-  }
-
   void _handleNavigationRouteParameters(Map<String, dynamic>? parameters) {
     log('MailboxController::_handleNavigationRouteParameters(): parameters: $parameters');
     if (parameters != null) {

lib/features/mailbox/presentation/mailbox_view.dart

@@ -9,6 +9,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_catego
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart';
@@ -349,18 +350,23 @@ class MailboxView extends BaseMailboxView {
       return _buildBodyMailboxCategory(context, categories, mailboxNode);
     }
     return Column(children: [
-      buildHeaderMailboxCategory(
-        context,
-        controller.responsiveUtils,
-        controller.imagePaths,
-        categories,
-        controller,
-        toggleMailboxCategories: controller.toggleMailboxCategories,
+      Obx(() => MailboxCategoryWidget(
+        categories: categories,
+        expandMode: categories.getExpandMode(
+          controller.mailboxCategoriesExpandMode.value,
+        ),
+        onToggleMailboxCategories: (categories, itemKey) =>
+            controller.toggleMailboxCategories(
+              categories,
+              controller.mailboxListScrollController,
+              itemKey,
+            ),
+        isArrangeLTR: false,
         padding: EdgeInsetsDirectional.only(
           start: 16,
-          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28),
-        isArrangeLTR: false,
-      ),
+          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
+        ),
+      )),
       AnimatedContainer(
         duration: const Duration(milliseconds: 400),
         child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
@@ -384,7 +390,12 @@ class MailboxView extends BaseMailboxView {
                 mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value,
                 onLongPressMailboxNodeAction: (mailboxNode) => openMailboxMenuActionOnMobile(context, controller.imagePaths, mailboxNode.item, controller),
                 onOpenMailboxFolderClick: (mailboxNode) => controller.openMailbox(context, mailboxNode.item),
-                onExpandFolderActionClick: (mailboxNode) => controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController),
+                onExpandFolderActionClick: (mailboxNode, itemKey) =>
+                    controller.toggleMailboxFolder(
+                        mailboxNode,
+                        controller.mailboxListScrollController,
+                        itemKey,
+                    ),
                 onSelectMailboxFolderClick: (mailboxNode) => controller.selectMailboxNode(mailboxNode),
               )),
               children: _buildListChildTileWidget(context, mailboxNode)

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -10,6 +10,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.da
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget.dart';
@@ -314,18 +315,22 @@ class MailboxView extends BaseMailboxView {
     } else {
       return Column(
         children: [
-          buildHeaderMailboxCategory(
-            context,
-            controller.responsiveUtils,
-            controller.imagePaths,
-            categories,
-            controller,
-            toggleMailboxCategories: controller.toggleMailboxCategories,
+          Obx(() => MailboxCategoryWidget(
+            categories: categories,
+            expandMode: categories.getExpandMode(
+              controller.mailboxCategoriesExpandMode.value,
+            ),
+            onToggleMailboxCategories: (categories, itemKey) =>
+                controller.toggleMailboxCategories(
+                  categories,
+                  controller.mailboxListScrollController,
+                  itemKey,
+                ),
+            isArrangeLTR: false,
             padding: controller.responsiveUtils.isDesktop(context)
               ? null
               : const EdgeInsetsDirectional.only(start: 16),
-            isArrangeLTR: false,
-          ),
+          )),
           AnimatedContainer(
             duration: const Duration(milliseconds: 400),
             child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
@@ -354,7 +359,12 @@ class MailboxView extends BaseMailboxView {
             mailboxNode: mailboxNode,
             mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value,
             onOpenMailboxFolderClick: (mailboxNode) => controller.openMailbox(context, mailboxNode.item),
-            onExpandFolderActionClick: (mailboxNode) => controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController),
+            onExpandFolderActionClick: (mailboxNode, itemKey) =>
+                controller.toggleMailboxFolder(
+                    mailboxNode,
+                    controller.mailboxListScrollController,
+                    itemKey,
+                ),
             onSelectMailboxFolderClick: controller.selectMailboxNode,
             onDragItemAccepted: _handleDragItemAccepted,
             onMenuActionClick: (position, mailboxNode) {

lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart

@@ -1,24 +1,19 @@
 
 import 'package:core/core.dart';
-import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/account_id.dart';
 import 'package:jmap_dart_client/jmap/core/capability/capability_identifier.dart';
 import 'package:jmap_dart_client/jmap/core/session/session.dart';
 import 'package:model/mailbox/mailbox_constants.dart';
 import 'package:model/model.dart';
-import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
 import 'package:tmail_ui_user/features/base/widget/popup_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_utils.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/main/error/capability_validator.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 mixin MailboxWidgetMixin {
 
@@ -331,62 +326,4 @@ mixin MailboxWidgetMixin {
       )
     );
   }
-
-  Widget buildHeaderMailboxCategory(
-    BuildContext context,
-    ResponsiveUtils responsiveUtils,
-    ImagePaths imagePaths,
-    MailboxCategories categories,
-    BaseMailboxController baseMailboxController,
-    {
-      required Function(MailboxCategories categories) toggleMailboxCategories,
-      EdgeInsetsGeometry? padding,
-      bool isArrangeLTR = true,
-    }
-  ) {
-    final item = Row(children: [
-      if (!isArrangeLTR)
-        Flexible(
-          child: Text(
-            categories.getTitle(context),
-            maxLines: 1,
-            overflow: CommonTextStyle.defaultTextOverFlow,
-            softWrap: CommonTextStyle.defaultSoftWrap,
-            style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
-          ),
-        ),
-      Obx(() {
-        final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
-        return TMailButtonWidget.fromIcon(
-          icon: expandMode == ExpandMode.EXPAND
-            ? imagePaths.icArrowBottom
-            : DirectionUtils.isDirectionRTLByLanguage(context)
-                ? imagePaths.icArrowLeft
-                : imagePaths.icArrowRight,
-          iconColor: Colors.black,
-          iconSize: 20,
-          backgroundColor: Colors.transparent,
-          padding: const EdgeInsets.all(5),
-          tooltipMessage: expandMode == ExpandMode.EXPAND
-            ? AppLocalizations.of(context).collapse
-            : AppLocalizations.of(context).expand,
-          onTapActionCallback: () => toggleMailboxCategories(categories)
-        );
-      }),
-      if (isArrangeLTR)
-        Expanded(child: Text(
-          categories.getTitle(context),
-          maxLines: 1,
-          overflow: CommonTextStyle.defaultTextOverFlow,
-          softWrap: CommonTextStyle.defaultSoftWrap,
-          style: ThemeUtils.textStyleBodyBody3(color: Colors.black)
-        )),
-    ]);
-
-    if (padding != null) {
-      return Padding(padding: padding, child: item);
-    } else {
-      return item;
-    }
-  }
 }

lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart

@@ -10,7 +10,7 @@ typedef OnSelectMailboxAction = void Function(PresentationMailbox);
 typedef OnDragEmailToMailboxAccepted = void Function(List<PresentationEmail>, PresentationMailbox);
 typedef OnLongPressMailboxAction = void Function(PresentationMailbox);
 
-typedef OnClickExpandMailboxNodeAction = void Function(MailboxNode);
+typedef OnClickExpandMailboxNodeAction = void Function(MailboxNode, GlobalKey itemKey);
 typedef OnClickOpenMailboxNodeAction = void Function(MailboxNode);
 typedef OnSelectMailboxNodeAction = void Function(MailboxNode);
 typedef OnClickOpenMenuMailboxNodeAction = void Function(RelativeRect, MailboxNode);

lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart

@@ -13,6 +13,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mai
 
 class LabelMailboxItemWidget extends StatelessWidget {
 
+  final GlobalKey itemKey;
   final ResponsiveUtils responsiveUtils;
   final ImagePaths imagePaths;
   final MailboxNode mailboxNode;
@@ -25,6 +26,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
 
   const LabelMailboxItemWidget({
     super.key,
+    required this.itemKey,
     required this.mailboxNode,
     required this.responsiveUtils,
     required this.imagePaths,
@@ -60,6 +62,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
           ),
         if (mailboxNode.hasChildren())
           MailboxExpandButton(
+            itemKey: itemKey,
             mailboxNode: mailboxNode,
             imagePaths: imagePaths,
             onExpandFolderActionClick: onClickExpandMailboxNodeAction,

lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart

@@ -0,0 +1,84 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnToggleMailboxCategories = Function(MailboxCategories, GlobalKey);
+
+class MailboxCategoryWidget extends StatefulWidget {
+  final MailboxCategories categories;
+  final ExpandMode expandMode;
+  final OnToggleMailboxCategories onToggleMailboxCategories;
+  final bool isArrangeLTR;
+  final EdgeInsetsGeometry? padding;
+
+  const MailboxCategoryWidget({
+    super.key,
+    required this.categories,
+    required this.expandMode,
+    required this.onToggleMailboxCategories,
+    this.isArrangeLTR = true,
+    this.padding,
+  });
+
+  @override
+  State<MailboxCategoryWidget> createState() => _MailboxCategoryWidgetState();
+}
+
+class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
+
+  final _imagePaths = Get.find<ImagePaths>();
+
+  final GlobalKey _key = GlobalKey();
+
+  @override
+  Widget build(BuildContext context) {
+    final item = Row(
+      key: _key,
+      children: [
+        if (!widget.isArrangeLTR)
+          Flexible(
+            child: Text(
+              widget.categories.getTitle(context),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+            ),
+          ),
+        TMailButtonWidget.fromIcon(
+            icon: widget.expandMode.getIcon(
+              _imagePaths,
+              DirectionUtils.isDirectionRTLByLanguage(context),
+            ),
+            iconColor: Colors.black,
+            iconSize: 20,
+            backgroundColor: Colors.transparent,
+            padding: const EdgeInsets.all(5),
+            tooltipMessage: widget.expandMode.getTooltipMessage(AppLocalizations.of(context)),
+            onTapActionCallback: () =>
+                widget.onToggleMailboxCategories(widget.categories, _key)),
+        if (widget.isArrangeLTR)
+          Expanded(
+            child: Text(
+              widget.categories.getTitle(context),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+            ),
+          ),
+      ],
+    );
+
+    if (widget.padding != null) {
+      return Padding(padding: widget.padding!, child: item);
+    } else {
+      return item;
+    }
+  }
+}

lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart

@@ -4,18 +4,20 @@ import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class MailboxExpandButton extends StatelessWidget {
+  final GlobalKey itemKey;
   final MailboxNode mailboxNode;
   final ImagePaths imagePaths;
   final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
 
   const MailboxExpandButton({
     super.key,
+    required this.itemKey,
     required this.mailboxNode,
     required this.imagePaths,
     required this.onExpandFolderActionClick,
@@ -24,35 +26,22 @@ class MailboxExpandButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return TMailButtonWidget.fromIcon(
-      icon: _getExpandIcon(context, imagePaths),
+      icon: mailboxNode.expandMode.getIcon(
+        imagePaths,
+        DirectionUtils.isDirectionRTLByLanguage(context),
+      ),
       iconColor: _expandIconColor,
       iconSize: 20,
       padding: const EdgeInsets.all(5),
       backgroundColor: Colors.transparent,
-      tooltipMessage: _getExpandTooltipMessage(context),
-      onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode),
+      tooltipMessage: mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
+      onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode, itemKey),
     );
   }
 
-  String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
-    if (mailboxNode.expandMode == ExpandMode.EXPAND) {
-      return imagePaths.icArrowBottom;
-    } else {
-      return DirectionUtils.isDirectionRTLByLanguage(context)
-          ? imagePaths.icArrowLeft
-          : imagePaths.icArrowRight;
-    }
-  }
-
   Color get _expandIconColor {
     return mailboxNode.item.allowedToDisplay
         ? Colors.black
         : AppColor.steelGray200;
   }
-
-  String _getExpandTooltipMessage(BuildContext context) {
-    return mailboxNode.expandMode == ExpandMode.EXPAND
-        ? AppLocalizations.of(context).collapse
-        : AppLocalizations.of(context).expand;
-  }
 }

lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart

@@ -62,11 +62,13 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
   final _imagePaths = Get.find<ImagePaths>();
 
   bool _isItemHovered = false;
+  final GlobalKey _key = GlobalKey();
 
   @override
   Widget build(BuildContext context) {
     if (_responsiveUtils.isWebDesktop(context) && widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
       return DragTarget<List<PresentationEmail>>(
+        key: _key,
         builder: (context, candidateEmails, rejectedEmails) {
           return InkWell(
             onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode),
@@ -95,6 +97,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   const SizedBox(width: MailboxItemWidgetStyles.space),
                   Expanded(
                     child: LabelMailboxItemWidget(
+                      itemKey: _key,
                       responsiveUtils: _responsiveUtils,
                       mailboxNode: widget.mailboxNode,
                       imagePaths: _imagePaths,
@@ -116,6 +119,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
       if (widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
         if (PlatformInfo.isWeb) {
           return InkWell(
+            key: _key,
             onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode),
             onHover: (value) => setState(() => _isItemHovered = value),
             child: Container(
@@ -138,6 +142,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   const SizedBox(width: MailboxItemWidgetStyles.space),
                   Expanded(
                     child: LabelMailboxItemWidget(
+                      itemKey: _key,
                       responsiveUtils: _responsiveUtils,
                       mailboxNode: widget.mailboxNode,
                       imagePaths: _imagePaths,
@@ -154,6 +159,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
           );
         } else {
           return Material(
+            key: _key,
             color: Colors.transparent,
             child: InkWell(
               onLongPress: () => widget.onLongPressMailboxNodeAction?.call(widget.mailboxNode),
@@ -181,6 +187,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                     const SizedBox(width: MailboxItemWidgetStyles.padding),
                     Expanded(
                       child: LabelMailboxItemWidget(
+                        itemKey: _key,
                         responsiveUtils: _responsiveUtils,
                         mailboxNode: widget.mailboxNode,
                         imagePaths: _imagePaths,
@@ -206,6 +213,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
         }
       } else {
         return AbsorbPointer(
+          key: _key,
           absorbing: !widget.mailboxNode.isActivated,
           child: Opacity(
             opacity: widget.mailboxNode.isActivated ? 1.0 : 0.3,
@@ -236,6 +244,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                       const SizedBox(width: MailboxItemWidgetStyles.padding),
                       Expanded(
                         child: LabelMailboxItemWidget(
+                          itemKey: _key,
                           responsiveUtils: _responsiveUtils,
                           mailboxNode: widget.mailboxNode,
                           imagePaths: _imagePaths,