fix: focus when SelectOptionCellEditor show

Author: appflowy

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart

@@ -11,20 +11,17 @@ import 'package:textfield_tags/textfield_tags.dart';
 
 import 'extension.dart';
 
-class SelectOptionTextField extends StatelessWidget {
-  final FocusNode _focusNode;
-  final TextEditingController _controller;
+class SelectOptionTextField extends StatefulWidget {
   final TextfieldTagsController tagController;
   final List<SelectOptionPB> options;
   final LinkedHashMap<String, SelectOptionPB> selectedOptionMap;
-
   final double distanceToText;
 
   final Function(String) onNewTag;
   final Function(String) newText;
   final VoidCallback? onClick;
 
-  SelectOptionTextField({
+  const SelectOptionTextField({
     required this.options,
     required this.selectedOptionMap,
     required this.distanceToText,
@@ -35,19 +32,36 @@ class SelectOptionTextField extends StatelessWidget {
     TextEditingController? textController,
     FocusNode? focusNode,
     Key? key,
-  })  : _controller = textController ?? TextEditingController(),
-        _focusNode = focusNode ?? FocusNode(),
-        super(key: key);
+  }) : super(key: key);
+
+  @override
+  State<SelectOptionTextField> createState() => _SelectOptionTextFieldState();
+}
+
+class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
+  late FocusNode focusNode;
+  late TextEditingController controller;
+
+  @override
+  void initState() {
+    focusNode = FocusNode();
+    controller = TextEditingController();
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      focusNode.requestFocus();
+    });
+    super.initState();
+  }
 
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
 
     return TextFieldTags(
-      textEditingController: _controller,
-      textfieldTagsController: tagController,
-      initialTags: selectedOptionMap.keys.toList(),
-      focusNode: _focusNode,
+      textEditingController: controller,
+      textfieldTagsController: widget.tagController,
+      initialTags: widget.selectedOptionMap.keys.toList(),
+      focusNode: focusNode,
       textSeparators: const [','],
       inputfieldBuilder: (
         BuildContext context,
@@ -59,23 +73,22 @@ class SelectOptionTextField extends StatelessWidget {
       ) {
         return ((context, sc, tags, onTagDelegate) {
           return TextField(
-            autofocus: true,
             controller: editController,
             focusNode: focusNode,
-            onTap: onClick,
+            onTap: widget.onClick,
             onChanged: (text) {
               if (onChanged != null) {
                 onChanged(text);
               }
-              newText(text);
+              widget.newText(text);
             },
             onSubmitted: (text) {
               if (onSubmitted != null) {
                 onSubmitted(text);
               }
 
               if (text.isNotEmpty) {
-                onNewTag(text);
+                widget.onNewTag(text);
                 focusNode.requestFocus();
               }
             },
@@ -89,7 +102,8 @@ class SelectOptionTextField extends StatelessWidget {
               isDense: true,
               prefixIcon: _renderTags(context, sc),
               hintText: LocaleKeys.grid_selectOption_searchOption.tr(),
-              prefixIconConstraints: BoxConstraints(maxWidth: distanceToText),
+              prefixIconConstraints:
+                  BoxConstraints(maxWidth: widget.distanceToText),
               focusedBorder: OutlineInputBorder(
                 borderSide: BorderSide(color: theme.main1, width: 1.0),
                 borderRadius: Corners.s10Border,
@@ -102,11 +116,11 @@ class SelectOptionTextField extends StatelessWidget {
   }
 
   Widget? _renderTags(BuildContext context, ScrollController sc) {
-    if (selectedOptionMap.isEmpty) {
+    if (widget.selectedOptionMap.isEmpty) {
       return null;
     }
 
-    final children = selectedOptionMap.values
+    final children = widget.selectedOptionMap.values
         .map((option) =>
             SelectOptionTag.fromOption(context: context, option: option))
         .toList();