fix: kanban board card text input inconsistency (#5307)

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/text_card_cell.dart

@@ -55,18 +55,26 @@ class _TextCellState extends State<TextCardCell> {
       widget.cellContext,
     ).as(),
   );
-  late final TextEditingController _textEditingController =
+  late final TextEditingController _textEditingController;
-      TextEditingController(text: cellBloc.state.content);
   final focusNode = SingleListenerFocusNode();
 
-  bool focusWhenInit = false;
-
   @override
   void initState() {
     super.initState();
-    focusWhenInit = widget.editableNotifier?.isCellEditing.value ?? false;
+
-    if (focusWhenInit) {
+    _textEditingController = TextEditingController(text: cellBloc.state.content)
+      ..addListener(() {
+        if (_textEditingController.value.composing.isCollapsed) {
+          cellBloc
+              .add(TextCellEvent.updateText(_textEditingController.value.text));
+        }
+      });
+
+    if (widget.editableNotifier?.isCellEditing.value ?? false) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
         focusNode.requestFocus();
+        cellBloc.add(const TextCellEvent.enableEdit(true));
+      });
     }
 
     // If the focusNode lost its focus, the widget's editableNotifier will
@@ -74,7 +82,6 @@ class _TextCellState extends State<TextCardCell> {
     // end edit event.
     focusNode.addListener(() {
       if (!focusNode.hasFocus) {
-        focusWhenInit = false;
         widget.editableNotifier?.isCellEditing.value = false;
         cellBloc.add(const TextCellEvent.enableEdit(false));
       }
@@ -100,45 +107,25 @@ class _TextCellState extends State<TextCardCell> {
 
   @override
   void didUpdateWidget(covariant oldWidget) {
+    if (oldWidget.editableNotifier != widget.editableNotifier) {
       _bindEditableNotifier();
+    }
     super.didUpdateWidget(oldWidget);
   }
 
   @override
   Widget build(BuildContext context) {
+    final isTitle = cellBloc.cellController.fieldInfo.isPrimary;
     return BlocProvider.value(
       value: cellBloc,
-      child: BlocConsumer<TextCellBloc, TextCellState>(
+      child: BlocListener<TextCellBloc, TextCellState>(
         listenWhen: (previous, current) => previous.content != current.content,
         listener: (context, state) {
           if (!state.enableEdit) {
             _textEditingController.text = state.content;
           }
         },
-        builder: (context, state) {
+        child: isTitle ? _buildTitle() : _buildText(),
-          final isTitle = cellBloc.cellController.fieldInfo.isPrimary;
-          if (state.content.isEmpty &&
-              state.enableEdit == false &&
-              focusWhenInit == false &&
-              !isTitle) {
-            return const SizedBox.shrink();
-          }
-
-          final icon = isTitle ? _buildIcon(state) : null;
-          final child = isTitle
-              ? _buildTextField(state.enableEdit || focusWhenInit)
-              : _buildText(state.content);
-
-          return Row(
-            children: [
-              if (icon != null) ...[
-                icon,
-                const HSpace(4.0),
-              ],
-              Expanded(child: child),
-            ],
-          );
-        },
       ),
     );
   }
@@ -146,6 +133,8 @@ class _TextCellState extends State<TextCardCell> {
   @override
   void dispose() {
     _textEditingController.dispose();
+    widget.editableNotifier?.isCellEditing
+        .removeListener(_bindEditableNotifier);
     focusNode.dispose();
     cellBloc.close();
     super.dispose();
@@ -170,9 +159,13 @@ class _TextCellState extends State<TextCardCell> {
     return null;
   }
 
-  Widget _buildText(String content) {
+  Widget _buildText() {
-    final text =
+    return BlocBuilder<TextCellBloc, TextCellState>(
-        content.isEmpty ? LocaleKeys.grid_row_textPlaceholder.tr() : content;
+      builder: (context, state) {
+        final content = state.content;
+        final text = content.isEmpty
+            ? LocaleKeys.grid_row_textPlaceholder.tr()
+            : content;
         final color = content.isEmpty ? Theme.of(context).hintColor : null;
 
         return Padding(
@@ -183,11 +176,32 @@ class _TextCellState extends State<TextCardCell> {
             maxLines: widget.style.maxLines,
           ),
         );
+      },
+    );
   }
 
-  Widget _buildTextField(bool isEditing) {
+  Widget _buildTitle() {
-    final padding =
+    final textField = _buildTextField();
-        widget.style.padding.add(const EdgeInsets.symmetric(vertical: 4.0));
+    return BlocBuilder<TextCellBloc, TextCellState>(
+      builder: (context, state) {
+        final icon = _buildIcon(state);
+        return Row(
+          children: [
+            if (icon != null) ...[
+              icon,
+              const HSpace(4.0),
+            ],
+            Expanded(child: textField),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildTextField() {
+    return BlocSelector<TextCellBloc, TextCellState, bool>(
+      selector: (state) => state.enableEdit,
+      builder: (context, isEditing) {
         return IgnorePointer(
           ignoring: !isEditing,
           child: CallbackShortcuts(
@@ -198,12 +212,6 @@ class _TextCellState extends State<TextCardCell> {
             child: TextField(
               controller: _textEditingController,
               focusNode: focusNode,
-          onChanged: (_) {
-            if (_textEditingController.value.composing.isCollapsed) {
-              cellBloc
-                  .add(TextCellEvent.updateText(_textEditingController.text));
-            }
-          },
               onEditingComplete: () => focusNode.unfocus(),
               maxLines: isEditing ? null : 2,
               minLines: 1,
@@ -212,7 +220,8 @@ class _TextCellState extends State<TextCardCell> {
               enableInteractiveSelection: isEditing,
               style: widget.style.titleTextStyle,
               decoration: InputDecoration(
-            contentPadding: padding,
+                contentPadding: widget.style.padding
+                    .add(const EdgeInsets.symmetric(vertical: 4.0)),
                 border: InputBorder.none,
                 enabledBorder: InputBorder.none,
                 isDense: true,
@@ -226,5 +235,7 @@ class _TextCellState extends State<TextCardCell> {
             ),
           ),
         );
+      },
+    );
   }
 }