diff --git a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart
index 917e848a78..7c1358bced 100644
--- a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart
@@ -1,5 +1,6 @@
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'dart:async';
@@ -36,9 +37,10 @@ class SelectionCellEvent with _$SelectionCellEvent {
 
 @freezed
 class SelectionCellState with _$SelectionCellState {
-  const factory SelectionCellState({
-    Cell? cell,
-  }) = _SelectionCellState;
+  const factory SelectionCellState() = _SelectionCellState;
+  // required String girdId,
+  //   required Field field,
+  //   required List<SelectOption> options,
 
   factory SelectionCellState.initial() => const SelectionCellState();
 }
diff --git a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/text_cell_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/text_cell_bloc.dart
index 985fad03be..f2162d8851 100644
--- a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/text_cell_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/text_cell_bloc.dart
@@ -33,17 +33,15 @@ class TextCellBloc extends Bloc<TextCellEvent, TextCellState> {
   }
 
   void updateCellContent(String content) {
-    if (state.cellData != null) {
-      final fieldId = state.cellData!.field.id;
-      final gridId = state.cellData!.gridId;
-      final rowId = state.cellData!.rowId;
-      service.updateCell(
-        data: content,
-        fieldId: fieldId,
-        gridId: gridId,
-        rowId: rowId,
-      );
-    }
+    final fieldId = state.cellData.field.id;
+    final gridId = state.cellData.gridId;
+    final rowId = state.cellData.rowId;
+    service.updateCell(
+      data: content,
+      fieldId: fieldId,
+      gridId: gridId,
+      rowId: rowId,
+    );
   }
 
   @override
@@ -67,7 +65,7 @@ class TextCellState with _$TextCellState {
   }) = _TextCellState;
 
   factory TextCellState.initial(FutureCellData cellData) => TextCellState(
-        content: cellData?.cell?.content ?? "",
+        content: cellData.cell?.content ?? "",
         cellData: cellData,
       );
 }
diff --git a/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart
index 6fc7221a76..85e5c35650 100644
--- a/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart
@@ -13,7 +13,7 @@ import 'package:dartz/dartz.dart';
 
 part 'row_bloc.freezed.dart';
 
-typedef CellDataMap = HashMap<String, GridCellData>;
+typedef CellDataMap = LinkedHashMap<String, GridCellData>;
 
 class RowBloc extends Bloc<RowEvent, RowState> {
   final RowService rowService;
@@ -48,10 +48,10 @@ class RowBloc extends Bloc<RowEvent, RowState> {
           didUpdateCell: (_DidUpdateCell value) async {
             final optionRow = await state.row;
             final CellDataMap cellDataMap = optionRow.fold(
-              () => HashMap.identity(),
+              () => CellDataMap.identity(),
               (row) => _makeCellDatas(row),
             );
-            emit(state.copyWith(cellDataMap: cellDataMap));
+            emit(state.copyWith(cellDataMap: Some(cellDataMap)));
           },
         );
       },
@@ -111,13 +111,15 @@ class RowBloc extends Bloc<RowEvent, RowState> {
   CellDataMap _makeCellDatas(Row row) {
     var map = CellDataMap.new();
     for (final field in state.fields) {
-      map[field.id] = GridCellData(
-        rowId: row.id,
-        gridId: rowService.gridId,
-        blockId: rowService.blockId,
-        cell: row.cellByFieldId[field.id],
-        field: field,
-      );
+      if (field.visibility) {
+        map[field.id] = GridCellData(
+          rowId: row.id,
+          gridId: rowService.gridId,
+          blockId: rowService.blockId,
+          cell: row.cellByFieldId[field.id],
+          field: field,
+        );
+      }
     }
     return map;
   }
@@ -138,7 +140,7 @@ class RowState with _$RowState {
     required double rowHeight,
     required List<Field> fields,
     required Future<Option<Row>> row,
-    required CellDataMap? cellDataMap,
+    required Option<CellDataMap> cellDataMap,
   }) = _RowState;
 
   factory RowState.initial(GridRowData data) => RowState(
@@ -146,6 +148,6 @@ class RowState with _$RowState {
         rowHeight: data.height,
         fields: data.fields,
         row: Future(() => none()),
-        cellDataMap: null,
+        cellDataMap: none(),
       );
 }
diff --git a/frontend/app_flowy/lib/workspace/application/grid/row/row_service.dart b/frontend/app_flowy/lib/workspace/application/grid/row/row_service.dart
index d30a22b7d0..1ef7b58d4b 100644
--- a/frontend/app_flowy/lib/workspace/application/grid/row/row_service.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/row/row_service.dart
@@ -29,7 +29,7 @@ class RowService {
   }
 }
 
-typedef FutureCellData = GridCellData?;
+typedef FutureCellData = GridCellData;
 
 class GridCellData extends Equatable {
   final String gridId;
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart
index 8a1b3a63ea..178a44f9d7 100755
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart
@@ -1,5 +1,4 @@
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
-import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/meta.pb.dart';
 import 'package:flutter/widgets.dart';
 import 'checkbox_cell.dart';
@@ -8,12 +7,9 @@ import 'number_cell.dart';
 import 'selection_cell/selection_cell.dart';
 import 'text_cell.dart';
 
-Widget buildGridCell(String rowId, Field field, FutureCellData cellData) {
-  if (cellData == null) {
-    return const SizedBox();
-  }
-  final key = ValueKey(field.id + rowId);
-  switch (field.fieldType) {
+Widget buildGridCell(FutureCellData cellData) {
+  final key = ValueKey(cellData.field.id + cellData.rowId);
+  switch (cellData.field.fieldType) {
     case FieldType.Checkbox:
       return CheckboxCell(cellData: cellData, key: key);
     case FieldType.DateTime:
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/extension.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/extension.dart
index 7bf977d6a4..7d5793f768 100644
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/extension.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/extension.dart
@@ -79,19 +79,13 @@ class SelectOptionTextField extends StatelessWidget {
       initialTags: ["abc", "bdf"],
       focusNode: _focusNode,
       textSeparators: const [' ', ','],
-      inputfieldBuilder: (
-        BuildContext context,
-        TextEditingController editController,
-        FocusNode focusNode,
-        String? error,
-        void Function(String)? onChanged,
-        void Function(String)? onSubmitted,
-      ) {
+      inputfieldBuilder: (BuildContext context, editController, focusNode, error, onChanged, onSubmitted) {
         return ((context, sc, tags, onTagDelegate) {
           return TextField(
             controller: editController,
             focusNode: focusNode,
-            onChanged: (value) {},
+            onChanged: onChanged,
+            onSubmitted: onSubmitted,
             onEditingComplete: () => focusNode.unfocus(),
             maxLines: 1,
             style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
@@ -131,6 +125,8 @@ class SelectOptionTextField extends StatelessWidget {
             borderRadius: BorderRadius.circular(6.0),
           ),
           child: FlowyText.medium("abc", fontSize: 12),
+          margin: const EdgeInsets.symmetric(horizontal: 5.0),
+          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
         )
       ]),
     );
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart
index 8e7c59b02c..5584b7ded5 100644
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart
@@ -1,7 +1,9 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/grid/prelude.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/cell_container.dart';
+import 'package:flowy_sdk/log.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'extension.dart';
 
@@ -32,10 +34,19 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
 
   @override
   Widget build(BuildContext context) {
-    _focusNode.addCallback(context, () {});
-    return SelectOptionTextField(
-      focusNode: _focusNode,
-      controller: _controller,
+    _focusNode.addCallback(context, () {
+      Log.info(_focusNode.hasFocus);
+    });
+    return BlocProvider.value(
+      value: _cellBloc,
+      child: BlocBuilder<SelectionCellBloc, SelectionCellState>(
+        builder: (context, state) {
+          return SelectOptionTextField(
+            focusNode: _focusNode,
+            controller: _controller,
+          );
+        },
+      ),
     );
   }
 
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart
index 98e1774425..20e329c788 100644
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart
@@ -114,20 +114,3 @@ class _SelectionCell extends StatelessWidget {
     );
   }
 }
-
-class SelectionBadge extends StatelessWidget {
-  final SelectOption option;
-  const SelectionBadge({required this.option, Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        color: option.color.make(context),
-        shape: BoxShape.rectangle,
-        borderRadius: BorderRadius.circular(6.0),
-      ),
-      child: FlowyText.medium(option.name, fontSize: 12),
-    );
-  }
-}
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart
index c4c32bda3b..06218f5776 100755
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart
@@ -122,17 +122,19 @@ class _RowCells extends StatelessWidget {
     return BlocBuilder<RowBloc, RowState>(
       buildWhen: (previous, current) => previous.cellDataMap != current.cellDataMap,
       builder: (context, state) {
-        final children = state.fields
-            .where((field) => field.visibility)
-            .map((field) => CellContainer(
-                  width: field.width.toDouble(),
-                  child: buildGridCell(
-                    state.rowId,
-                    field,
-                    state.cellDataMap?[field.id],
-                  ),
-                ))
-            .toList();
+        final List<Widget> children = state.cellDataMap.fold(
+          () => [],
+          (dataMap) {
+            return dataMap.values.map(
+              (value) {
+                return CellContainer(
+                  width: value.field.width.toDouble(),
+                  child: buildGridCell(value),
+                );
+              },
+            ).toList();
+          },
+        );
 
         return Row(children: children);
       },