fix: select option mouse-click event conflict (#4003)

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/select_option/option_list.dart

@@ -1,6 +1,8 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/plugins/database_view/grid/application/filter/select_option_filter_list_bloc.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/filter/filter_info.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart';
 
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -8,8 +10,6 @@ import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
-import '../../../../../../widgets/row/cells/select_option_cell/extension.dart';
-import '../../filter_info.dart';
 import 'select_option_loader.dart';
 
 class SelectOptionFilterList extends StatelessWidget {
@@ -86,8 +86,8 @@ class SelectOptionFilterCell extends StatefulWidget {
   const SelectOptionFilterCell({
     required this.option,
     required this.isSelected,
-    Key? key,
+    super.key,
-  }) : super(key: key);
+  });
 
   @override
   State<SelectOptionFilterCell> createState() => _SelectOptionFilterCellState();
@@ -100,15 +100,15 @@ class _SelectOptionFilterCellState extends State<SelectOptionFilterCell> {
       height: GridSize.popoverItemHeight,
       child: SelectOptionTagCell(
         option: widget.option,
-        onSelected: (option) {
+        onSelected: () {
           if (widget.isSelected) {
             context
                 .read<SelectOptionFilterListBloc>()
-                .add(SelectOptionFilterListEvent.unselectOption(option));
+                .add(SelectOptionFilterListEvent.unselectOption(widget.option));
           } else {
             context
                 .read<SelectOptionFilterListBloc>()
-                .add(SelectOptionFilterListEvent.selectOption(option));
+                .add(SelectOptionFilterListEvent.selectOption(widget.option));
           }
         },
         children: [

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/multi_select.dart

@@ -31,10 +31,10 @@ class MultiSelectTypeOptionWidget extends TypeOptionWidget {
   final PopoverMutex? popoverMutex;
 
   const MultiSelectTypeOptionWidget({
-    Key? key,
+    super.key,
     required this.selectOptionAction,
     this.popoverMutex,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart

@@ -21,12 +21,12 @@ class SelectOptionTypeOptionWidget extends StatelessWidget {
   final PopoverMutex? popoverMutex;
 
   const SelectOptionTypeOptionWidget({
+    super.key,
     required this.options,
     required this.beginEdit,
     required this.typeOptionAction,
     this.popoverMutex,
-    Key? key,
+  });
-  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -96,8 +96,7 @@ class _OptionList extends StatelessWidget {
       },
       builder: (context, state) {
         final cells = state.options.map((option) {
-          return _makeOptionCell(
+          return _OptionCell(
-            context: context,
             option: option,
             popoverMutex: popoverMutex,
           );
@@ -116,17 +115,6 @@ class _OptionList extends StatelessWidget {
       },
     );
   }
-
-  _OptionCell _makeOptionCell({
-    required BuildContext context,
-    required SelectOptionPB option,
-    PopoverMutex? popoverMutex,
-  }) {
-    return _OptionCell(
-      option: option,
-      popoverMutex: popoverMutex,
-    );
-  }
 }
 
 class _OptionCell extends StatefulWidget {
@@ -154,13 +142,13 @@ class _OptionCellState extends State<_OptionCell> {
       height: 28,
       child: SelectOptionTagCell(
         option: widget.option,
-        onSelected: (SelectOptionPB pb) {
+        onSelected: () => _popoverController.show(),
-          _popoverController.show();
-        },
         children: [
-          Padding(
+          FlowyIconButton(
-            padding: const EdgeInsets.symmetric(horizontal: 6.0),
+            onPressed: () => _popoverController.show(),
-            child: FlowySvg(
+            iconPadding: const EdgeInsets.symmetric(horizontal: 6.0),
+            hoverColor: Colors.transparent,
+            icon: FlowySvg(
               FlowySvgs.details_s,
               color: Theme.of(context).iconTheme.color,
             ),
@@ -228,10 +216,11 @@ class _AddOptionButton extends StatelessWidget {
 
 class CreateOptionTextField extends StatefulWidget {
   final PopoverMutex? popoverMutex;
+
   const CreateOptionTextField({
-    Key? key,
+    super.key,
     this.popoverMutex,
-  }) : super(key: key);
+  });
 
   @override
   State<CreateOptionTextField> createState() => _CreateOptionTextFieldState();

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/single_select.dart

@@ -30,10 +30,10 @@ class SingleSelectTypeOptionWidget extends TypeOptionWidget {
   final PopoverMutex? popoverMutex;
 
   const SingleSelectTypeOptionWidget({
-    Key? key,
+    super.key,
     required this.selectOptionAction,
     this.popoverMutex,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart

@@ -64,26 +64,23 @@ extension SelectOptionColorExtension on SelectOptionColorPB {
 class SelectOptionTag extends StatelessWidget {
   final String name;
   final Color color;
-  final VoidCallback? onSelected;
   final void Function(String)? onRemove;
+
   const SelectOptionTag({
     required this.name,
     required this.color,
-    this.onSelected,
     this.onRemove,
-    Key? key,
+    super.key,
-  }) : super(key: key);
+  });
 
   factory SelectOptionTag.fromOption({
     required BuildContext context,
     required SelectOptionPB option,
-    VoidCallback? onSelected,
     Function(String)? onRemove,
   }) {
     return SelectOptionTag(
       name: option.name,
       color: option.color.toColor(context),
-      onSelected: onSelected,
       onRemove: onRemove,
     );
   }
@@ -119,9 +116,7 @@ class SelectOptionTag extends StatelessWidget {
               width: 18.0,
               onPressed: () => onRemove?.call(name),
               hoverColor: Colors.transparent,
-              icon: const FlowySvg(
+              icon: const FlowySvg(FlowySvgs.close_s),
-                FlowySvgs.close_s,
-              ),
             ),
           ],
         ],
@@ -131,9 +126,6 @@ class SelectOptionTag extends StatelessWidget {
 }
 
 class SelectOptionTagCell extends StatelessWidget {
-  final List<Widget> children;
-  final void Function(SelectOptionPB) onSelected;
-  final SelectOptionPB option;
   const SelectOptionTagCell({
     super.key,
     required this.option,
@@ -141,25 +133,31 @@ class SelectOptionTagCell extends StatelessWidget {
     this.children = const [],
   });
 
+  final SelectOptionPB option;
+  final VoidCallback onSelected;
+  final List<Widget> children;
+
   @override
   Widget build(BuildContext context) {
     return FlowyHover(
       style: HoverStyle(
         hoverColor: AFThemeExtension.of(context).lightGreyHover,
       ),
-      child: InkWell(
       child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           Expanded(
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: onSelected,
               child: Align(
-                alignment: Alignment.centerLeft,
+                alignment: AlignmentDirectional.centerStart,
                 child: Padding(
                   padding: const EdgeInsets.all(5.0),
                   child: SelectOptionTag.fromOption(
                     context: context,
                     option: option,
-                    onSelected: () => onSelected(option),
+                  ),
                 ),
               ),
             ),
@@ -167,9 +165,6 @@ class SelectOptionTagCell extends StatelessWidget {
           ...children,
         ],
       ),
-        // TODO(richard): find alternative solution to onTapDown
-        onTapDown: (_) => onSelected(option),
-      ),
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart

@@ -246,8 +246,13 @@ class _CreateOptionCell extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 12.0),
       child: SizedBox(
-        height: GridSize.popoverItemHeight,
+        height: 28,
-        child: Row(
+        child: FlowyButton(
+          hoverColor: AFThemeExtension.of(context).lightGreyHover,
+          onTap: () => context
+              .read<SelectOptionCellEditorBloc>()
+              .add(SelectOptionEditorEvent.newOption(name)),
+          text: Row(
             children: [
               FlowyText.medium(
                 LocaleKeys.grid_selectOption_create.tr(),
@@ -259,16 +264,14 @@ class _CreateOptionCell extends StatelessWidget {
                   alignment: Alignment.centerLeft,
                   child: SelectOptionTag(
                     name: name,
-                  color: AFThemeExtension.of(context).greyHover,
+                    color: Theme.of(context).colorScheme.surfaceVariant,
-                  onSelected: () => context
-                      .read<SelectOptionCellEditorBloc>()
-                      .add(SelectOptionEditorEvent.newOption(name)),
                   ),
                 ),
               ),
             ],
           ),
         ),
+      ),
     );
   }
 }
@@ -304,27 +307,20 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
       height: 28,
       child: SelectOptionTagCell(
         option: widget.option,
-        onSelected: (option) {
+        onSelected: _onTap,
-          if (widget.isSelected) {
-            context
-                .read<SelectOptionCellEditorBloc>()
-                .add(SelectOptionEditorEvent.unSelectOption(option.id));
-          } else {
-            context
-                .read<SelectOptionCellEditorBloc>()
-                .add(SelectOptionEditorEvent.selectOption(option.id));
-          }
-        },
         children: [
           if (widget.isSelected)
-            Padding(
+            FlowyIconButton(
-              padding: const EdgeInsets.only(left: 6),
+              width: 20,
-              child: FlowySvg(
+              hoverColor: Colors.transparent,
+              onPressed: _onTap,
+              icon: FlowySvg(
                 FlowySvgs.check_s,
                 color: Theme.of(context).iconTheme.color,
               ),
             ),
           FlowyIconButton(
+            width: 30,
             onPressed: () => _popoverController.show(),
             iconPadding: const EdgeInsets.symmetric(horizontal: 6.0),
             hoverColor: Colors.transparent,
@@ -368,4 +364,17 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
       },
     );
   }
+
+  void _onTap() {
+    widget.popoverMutex.close();
+    if (widget.isSelected) {
+      context
+          .read<SelectOptionCellEditorBloc>()
+          .add(SelectOptionEditorEvent.unSelectOption(widget.option.id));
+    } else {
+      context
+          .read<SelectOptionCellEditorBloc>()
+          .add(SelectOptionEditorEvent.selectOption(widget.option.id));
+    }
+  }
 }