chore: more select option cell editor improvements (#5019)

frontend/appflowy_flutter/lib/plugins/database/application/cell/bloc/select_option_cell_editor_bloc.dart

@@ -6,6 +6,7 @@ import 'package:appflowy/plugins/database/domain/field_service.dart';
 import 'package:appflowy/plugins/database/domain/select_option_cell_service.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:collection/collection.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -56,15 +57,20 @@ class SelectOptionCellEditorBloc
 
   VoidCallback? _onCellChangedFn;
 
+  final List<SelectOptionPB> allOptions = [];
+  String filter = "";
+
   void _dispatch() {
     on<SelectOptionCellEditorEvent>(
       (event, emit) async {
         await event.when(
           didReceiveOptions: (options, selectedOptions) {
-            final result = _makeOptions(state.filter, options);
+            final result = _getVisibleOptions(options);
+            allOptions
+              ..clear()
+              ..addAll(options);
             emit(
               state.copyWith(
-                allOptions: options,
                 options: result.options,
                 createSelectOptionSuggestion:
                     result.createSelectOptionSuggestion,
@@ -76,22 +82,19 @@ class SelectOptionCellEditorBloc
             if (state.createSelectOptionSuggestion == null) {
               return;
             }
+            filter = "";
             await _createOption(
               name: state.createSelectOptionSuggestion!.name,
               color: state.createSelectOptionSuggestion!.color,
             );
-            emit(
+            emit(state.copyWith(clearFilter: true));
-              state.copyWith(
-                filter: null,
-              ),
-            );
           },
           deleteOption: (option) async {
             await _deleteOption([option]);
           },
           deleteAllOptions: () async {
-            if (state.allOptions.isNotEmpty) {
+            if (allOptions.isNotEmpty) {
-              await _deleteOption(state.allOptions);
+              await _deleteOption(allOptions);
             }
           },
           updateOption: (option) async {
@@ -99,27 +102,17 @@ class SelectOptionCellEditorBloc
           },
           selectOption: (optionId) async {
             await _selectOptionService.select(optionIds: [optionId]);
-            final selectedOption = [
-              ...state.selectedOptions,
-              state.options.firstWhere(
-                (element) => element.id == optionId,
-              ),
-            ];
-            emit(
-              state.copyWith(
-                selectedOptions: selectedOption,
-              ),
-            );
           },
           unSelectOption: (optionId) async {
             await _selectOptionService.unSelect(optionIds: [optionId]);
-            final selectedOptions = [...state.selectedOptions]
+          },
-              ..removeWhere((e) => e.id == optionId);
+          unSelectLastOption: () async {
-            emit(
+            if (state.selectedOptions.isEmpty) {
-              state.copyWith(
+              return;
-                selectedOptions: selectedOptions,
+            }
-              ),
+            final lastSelectedOptionId = state.selectedOptions.last.id;
-            );
+            await _selectOptionService
+                .unSelect(optionIds: [lastSelectedOptionId]);
           },
           submitTextField: () {
             _submitTextFieldValue(emit);
@@ -132,64 +125,31 @@ class SelectOptionCellEditorBloc
           },
           reorderOption: (fromOptionId, toOptionId) {
             final options = _typeOptionAction.reorderOption(
-              state.allOptions,
+              allOptions,
               fromOptionId,
               toOptionId,
             );
-            final result = _makeOptions(state.filter, options);
+            allOptions
-            emit(
+              ..clear()
-              state.copyWith(
+              ..addAll(options);
-                allOptions: options,
+            final result = _getVisibleOptions(options);
-                options: result.options,
+            emit(state.copyWith(options: result.options));
-              ),
-            );
           },
-          filterOption: (optionName) {
+          filterOption: (filterText) {
-            _filterOption(optionName, emit);
+            _filterOption(filterText, emit);
           },
           focusPreviousOption: () {
-            if (state.options.isEmpty) {
+            _focusOption(true, emit);
-              return;
-            }
-            if (state.focusedOptionId == null) {
-              emit(state.copyWith(focusedOptionId: state.options.last.id));
-            } else {
-              final currentIndex = state.options
-                  .indexWhere((option) => option.id == state.focusedOptionId);
-
-              if (currentIndex != -1) {
-                final newIndex = (currentIndex - 1) % state.options.length;
-                emit(
-                  state.copyWith(
-                    focusedOptionId: state.options[newIndex].id,
-                  ),
-                );
-              }
-            }
           },
           focusNextOption: () {
-            if (state.options.isEmpty) {
+            _focusOption(false, emit);
-              return;
-            }
-            if (state.focusedOptionId == null) {
-              emit(state.copyWith(focusedOptionId: state.options.first.id));
-            } else {
-              final currentIndex = state.options
-                  .indexWhere((option) => option.id == state.focusedOptionId);
-
-              if (currentIndex != -1) {
-                final newIndex = (currentIndex + 1) % state.options.length;
-                emit(
-                  state.copyWith(
-                    focusedOptionId: state.options[newIndex].id,
-                  ),
-                );
-              }
-            }
           },
           updateFocusedOption: (optionId) {
             emit(state.copyWith(focusedOptionId: optionId));
           },
+          resetClearFilterFlag: () {
+            emit(state.copyWith(clearFilter: false));
+          },
         );
       },
     );
@@ -233,59 +193,57 @@ class SelectOptionCellEditorBloc
       return;
     }
 
-    final optionId = state.focusedOptionId!;
+    final focusedOptionId = state.focusedOptionId!;
 
-    if (optionId == createSelectOptionSuggestionId) {
+    if (focusedOptionId == createSelectOptionSuggestionId) {
+      filter = "";
       _createOption(
         name: state.createSelectOptionSuggestion!.name,
         color: state.createSelectOptionSuggestion!.color,
       );
       emit(
         state.copyWith(
-          filter: null,
           createSelectOptionSuggestion: null,
+          clearFilter: true,
         ),
       );
-    } else if (!state.selectedOptions.any((option) => option.id == optionId)) {
+    } else if (!state.selectedOptions
-      _selectOptionService.select(optionIds: [optionId]);
+        .any((option) => option.id == focusedOptionId)) {
+      _selectOptionService.select(optionIds: [focusedOptionId]);
     }
   }
 
   void _selectMultipleOptions(List<String> optionNames) {
-    // The options are unordered. So in order to keep the inserted [optionNames]
+    final optionIds = optionNames
-    // order, it needs to get the option id in the [optionNames] order.
+        .map(
-    final lowerCaseNames = optionNames.map((e) => e.toLowerCase());
+          (name) => allOptions.firstWhereOrNull(
-    final Map<String, String> optionIdsMap = {};
+            (option) => option.name.toLowerCase() == name.toLowerCase(),
-    for (final option in state.options) {
+          ),
-      optionIdsMap[option.name.toLowerCase()] = option.id;
+        )
-    }
+        .nonNulls
-
+        .map((option) => option.id)
-    final optionIds = lowerCaseNames
-        .where((name) => optionIdsMap[name] != null)
-        .map((name) => optionIdsMap[name]!)
         .toList();
 
     _selectOptionService.select(optionIds: optionIds);
   }
 
   void _filterOption(
-    String optionName,
+    String filterText,
     Emitter<SelectOptionCellEditorState> emit,
   ) {
-    final _MakeOptionResult result = _makeOptions(
+    filter = filterText;
-      optionName,
+    final _MakeOptionResult result = _getVisibleOptions(
-      state.allOptions,
+      allOptions,
     );
     final focusedOptionId = result.options.isEmpty
         ? result.createSelectOptionSuggestion == null
             ? null
             : createSelectOptionSuggestionId
-        : result.options.length != state.options.length
+        : result.options.any((option) => option.id == state.focusedOptionId)
-            ? result.options.first.id
+            ? state.focusedOptionId
-            : state.focusedOptionId;
+            : result.options.first.id;
     emit(
       state.copyWith(
-        filter: optionName,
         options: result.options,
         createSelectOptionSuggestion: result.createSelectOptionSuggestion,
         focusedOptionId: focusedOptionId,
@@ -314,39 +272,66 @@ class SelectOptionCellEditorBloc
     );
   }
 
-  _MakeOptionResult _makeOptions(
+  _MakeOptionResult _getVisibleOptions(
-    String? filter,
     List<SelectOptionPB> allOptions,
   ) {
     final List<SelectOptionPB> options = List.from(allOptions);
-    String? newOptionName = filter;
+    String newOptionName = filter;
 
-    if (filter != null && filter.isNotEmpty) {
+    if (filter.isNotEmpty) {
       options.retainWhere((option) {
         final name = option.name.toLowerCase();
         final lFilter = filter.toLowerCase();
 
         if (name == lFilter) {
-          newOptionName = null;
+          newOptionName = "";
         }
 
         return name.contains(lFilter);
       });
-    } else {
-      newOptionName = null;
     }
 
     return _MakeOptionResult(
       options: options,
-      createSelectOptionSuggestion: newOptionName != null
+      createSelectOptionSuggestion: newOptionName.isEmpty
-          ? CreateSelectOptionSuggestion(
+          ? null
-              name: newOptionName!,
+          : CreateSelectOptionSuggestion(
+              name: newOptionName,
               color: newSelectOptionColor(allOptions),
-            )
+            ),
-          : null,
     );
   }
 
+  void _focusOption(bool previous, Emitter<SelectOptionCellEditorState> emit) {
+    if (state.options.isEmpty && state.createSelectOptionSuggestion == null) {
+      return;
+    }
+
+    final optionIds = [
+      ...state.options.map((e) => e.id),
+      if (state.createSelectOptionSuggestion != null)
+        createSelectOptionSuggestionId,
+    ];
+
+    if (state.focusedOptionId == null) {
+      emit(
+        state.copyWith(
+          focusedOptionId: previous ? optionIds.last : optionIds.first,
+        ),
+      );
+      return;
+    }
+
+    final currentIndex =
+        optionIds.indexWhere((id) => id == state.focusedOptionId);
+
+    final newIndex = currentIndex == -1
+        ? 0
+        : (currentIndex + (previous ? -1 : 1)) % optionIds.length;
+
+    emit(state.copyWith(focusedOptionId: optionIds[newIndex]));
+  }
+
   void _startListening() {
     _onCellChangedFn = cellController.addListener(
       onCellChanged: (selectOptionContext) {
@@ -370,6 +355,8 @@ class SelectOptionCellEditorEvent with _$SelectOptionCellEditorEvent {
       _SelectOption;
   const factory SelectOptionCellEditorEvent.unSelectOption(String optionId) =
       _UnSelectOption;
+  const factory SelectOptionCellEditorEvent.unSelectLastOption() =
+      _UnSelectLastOption;
   const factory SelectOptionCellEditorEvent.updateOption(
     SelectOptionPB option,
   ) = _UpdateOption;
@@ -382,7 +369,7 @@ class SelectOptionCellEditorEvent with _$SelectOptionCellEditorEvent {
     String fromOptionId,
     String toOptionId,
   ) = _ReorderOption;
-  const factory SelectOptionCellEditorEvent.filterOption(String optionName) =
+  const factory SelectOptionCellEditorEvent.filterOption(String filterText) =
       _SelectOptionFilter;
   const factory SelectOptionCellEditorEvent.submitTextField() =
       _SubmitTextField;
@@ -397,17 +384,18 @@ class SelectOptionCellEditorEvent with _$SelectOptionCellEditorEvent {
   const factory SelectOptionCellEditorEvent.updateFocusedOption(
     String? optionId,
   ) = _UpdateFocusedOption;
+  const factory SelectOptionCellEditorEvent.resetClearFilterFlag() =
+      _ResetClearFilterFlag;
 }
 
 @freezed
 class SelectOptionCellEditorState with _$SelectOptionCellEditorState {
   const factory SelectOptionCellEditorState({
     required List<SelectOptionPB> options,
-    required List<SelectOptionPB> allOptions,
     required List<SelectOptionPB> selectedOptions,
     required CreateSelectOptionSuggestion? createSelectOptionSuggestion,
-    required String? filter,
     required String? focusedOptionId,
+    required bool clearFilter,
   }) = _SelectOptionEditorState;
 
   factory SelectOptionCellEditorState.initial(
@@ -416,11 +404,10 @@ class SelectOptionCellEditorState with _$SelectOptionCellEditorState {
     final data = context.getCellData(loadIfNotExist: false);
     return SelectOptionCellEditorState(
       options: data?.options ?? [],
-      allOptions: data?.options ?? [],
       selectedOptions: data?.selectOptions ?? [],
       createSelectOptionSuggestion: null,
-      filter: null,
       focusedOptionId: null,
+      clearFilter: false,
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/database/grid/application/filter/select_option_filter_list_bloc.dart

@@ -36,7 +36,7 @@ class SelectOptionFilterListBloc<T>
               emit: emit,
             );
           },
-          unselectOption: (option) {
+          unSelectOption: (option) {
             final selectedOptionIds = Set<String>.from(state.selectedOptionIds);
             selectedOptionIds.remove(option.id);
 
@@ -121,7 +121,7 @@ class SelectOptionFilterListEvent with _$SelectOptionFilterListEvent {
     SelectOptionPB option,
     SelectOptionFilterConditionPB condition,
   ) = _SelectOption;
-  const factory SelectOptionFilterListEvent.unselectOption(
+  const factory SelectOptionFilterListEvent.unSelectOption(
     SelectOptionPB option,
   ) = _UnSelectOption;
   const factory SelectOptionFilterListEvent.didReceiveOptions(

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

@@ -89,7 +89,7 @@ class _SelectOptionFilterCellState extends State<SelectOptionFilterCell> {
           if (widget.isSelected) {
             context
                 .read<SelectOptionFilterListBloc>()
-                .add(SelectOptionFilterListEvent.unselectOption(widget.option));
+                .add(SelectOptionFilterListEvent.unSelectOption(widget.option));
           } else {
             context.read<SelectOptionFilterListBloc>().add(
                   SelectOptionFilterListEvent.selectOption(

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/select_option_cell_editor.dart

@@ -45,21 +45,20 @@ class _SelectOptionCellEditorState extends State<SelectOptionCellEditor> {
     super.initState();
     focusNode = FocusNode(
       onKeyEvent: (node, event) {
-        if (event is KeyUpEvent) {
-          return KeyEventResult.ignored;
-        }
         switch (event.logicalKey) {
-          case LogicalKeyboardKey.arrowUp:
+          case LogicalKeyboardKey.arrowUp when event is! KeyUpEvent:
             if (textEditingController.value.composing.isCollapsed) {
               bloc.add(const SelectOptionCellEditorEvent.focusPreviousOption());
               return KeyEventResult.handled;
             }
-          case LogicalKeyboardKey.arrowDown:
+            break;
+          case LogicalKeyboardKey.arrowDown when event is! KeyUpEvent:
             if (textEditingController.value.composing.isCollapsed) {
               bloc.add(const SelectOptionCellEditorEvent.focusNextOption());
               return KeyEventResult.handled;
             }
-          case LogicalKeyboardKey.escape:
+            break;
+          case LogicalKeyboardKey.escape when event is! KeyUpEvent:
             if (!textEditingController.value.composing.isCollapsed) {
               final end = textEditingController.value.composing.end;
               final text = textEditingController.text;
@@ -70,6 +69,13 @@ class _SelectOptionCellEditorState extends State<SelectOptionCellEditor> {
               );
               return KeyEventResult.handled;
             }
+            break;
+          case LogicalKeyboardKey.backspace when event is KeyUpEvent:
+            if (!textEditingController.text.isNotEmpty) {
+              bloc.add(const SelectOptionCellEditorEvent.unSelectLastOption());
+              return KeyEventResult.handled;
+            }
+            break;
         }
         return KeyEventResult.ignored;
       },
@@ -126,7 +132,18 @@ class _OptionList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<SelectOptionCellEditorBloc, SelectOptionCellEditorState>(
+    return BlocConsumer<SelectOptionCellEditorBloc,
+        SelectOptionCellEditorState>(
+      listenWhen: (previous, current) =>
+          previous.clearFilter != current.clearFilter,
+      listener: (context, state) {
+        if (state.clearFilter) {
+          textEditingController.clear();
+          context
+              .read<SelectOptionCellEditorBloc>()
+              .add(const SelectOptionCellEditorEvent.resetClearFilterFlag());
+        }
+      },
       buildWhen: (previous, current) =>
           !listEquals(previous.options, current.options) ||
           previous.createSelectOptionSuggestion !=
@@ -231,7 +248,6 @@ class _TextField extends StatelessWidget {
                 context
                     .read<SelectOptionCellEditorBloc>()
                     .add(const SelectOptionCellEditorEvent.submitTextField());
-                textEditingController.clear();
                 focusNode.requestFocus();
               },
               onPaste: (tagNames, remainder) {

frontend/appflowy_flutter/test/bloc_test/grid_test/cell/select_option_cell_test.dart

@@ -184,7 +184,7 @@ void main() {
 
       assert(bloc.state.selectedOptions.length == 1);
       expect(bloc.state.selectedOptions[0].name, "A");
-      expect(bloc.state.filter, "x");
+      expect(bloc.filter, "x");
     });
 
     test('filter options', () async {
@@ -234,12 +234,12 @@ void main() {
         reason: "Options: ${bloc.state.options}",
       );
       expect(
-        bloc.state.allOptions.length,
+        bloc.allOptions.length,
         3,
         reason: "Options: ${bloc.state.options}",
       );
       expect(bloc.state.createSelectOptionSuggestion!.name, "a");
-      expect(bloc.state.filter, "a");
+      expect(bloc.filter, "a");
     });
   });
 }