chore: auto focus checklist editing (#2720)

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor_bloc.dart

@@ -41,6 +41,7 @@ class ChecklistCellEditorBloc
             _createOption(optionName);
             emit(
               state.copyWith(
+                createOption: Some(optionName),
                 predicate: '',
               ),
             );

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart

@@ -54,36 +54,7 @@ class _SliverChecklistProgressBarDelegate
     double shrinkOffset,
     bool overlapsContent,
   ) {
-    return BlocBuilder<ChecklistCellEditorBloc, ChecklistCellEditorState>(
-      builder: (context, state) {
-        return Padding(
-          padding: GridSize.typeOptionContentInsets,
-          child: Column(
-            children: [
-              FlowyTextField(
-                autoClearWhenDone: true,
-                submitOnLeave: true,
-                hintText: LocaleKeys.grid_checklist_panelTitle.tr(),
-                onChanged: (text) {
-                  context
-                      .read<ChecklistCellEditorBloc>()
-                      .add(ChecklistCellEditorEvent.filterOption(text));
-                },
-                onSubmitted: (text) {
-                  context
-                      .read<ChecklistCellEditorBloc>()
-                      .add(ChecklistCellEditorEvent.newOption(text));
-                },
-              ),
-              Padding(
-                padding: const EdgeInsets.only(top: 6.0),
-                child: ChecklistProgressBar(percent: state.percent),
-              ),
-            ],
-          ),
-        );
-      },
-    );
+    return const _AutoFocusTextField();
   }
 
   @override
@@ -97,3 +68,62 @@ class _SliverChecklistProgressBarDelegate
     return true;
   }
 }
+
+class _AutoFocusTextField extends StatefulWidget {
+  const _AutoFocusTextField();
+
+  @override
+  State<_AutoFocusTextField> createState() => _AutoFocusTextFieldState();
+}
+
+class _AutoFocusTextFieldState extends State<_AutoFocusTextField> {
+  final _focusNode = FocusNode();
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ChecklistCellEditorBloc, ChecklistCellEditorState>(
+      builder: (context, state) {
+        return BlocListener<ChecklistCellEditorBloc, ChecklistCellEditorState>(
+          listenWhen: (previous, current) =>
+              previous.createOption != current.createOption,
+          listener: (context, state) {
+            if (_focusNode.canRequestFocus) {
+              _focusNode.requestFocus();
+            }
+          },
+          child: Container(
+            color: Theme.of(context).cardColor,
+            child: Padding(
+              padding: GridSize.typeOptionContentInsets,
+              child: Column(
+                children: [
+                  FlowyTextField(
+                    autoFocus: true,
+                    focusNode: _focusNode,
+                    autoClearWhenDone: true,
+                    submitOnLeave: true,
+                    hintText: LocaleKeys.grid_checklist_panelTitle.tr(),
+                    onChanged: (text) {
+                      context
+                          .read<ChecklistCellEditorBloc>()
+                          .add(ChecklistCellEditorEvent.filterOption(text));
+                    },
+                    onSubmitted: (text) {
+                      context
+                          .read<ChecklistCellEditorBloc>()
+                          .add(ChecklistCellEditorEvent.newOption(text));
+                    },
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 6.0),
+                    child: ChecklistProgressBar(percent: state.percent),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}