diff --git a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart index 7235217d4c..0b043a2ba7 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart @@ -80,23 +80,7 @@ class _BoardContentState extends State { @override Widget build(BuildContext context) { return BlocListener( - listener: (context, state) { - state.editingRow.fold( - () => null, - (editingRow) { - WidgetsBinding.instance.addPostFrameCallback((_) { - if (editingRow.index != null) { - } else { - scrollManager.scrollToBottom(editingRow.columnId, () { - context - .read() - .add(BoardEvent.endEditRow(editingRow.row.id)); - }); - } - }); - }, - ); - }, + listener: (context, state) => _handleEditState(state, context), child: BlocBuilder( buildWhen: (previous, current) => previous.groupIds.length != current.groupIds.length, @@ -137,6 +121,27 @@ class _BoardContentState extends State { ); } + void _handleEditState(BoardState state, BuildContext context) { + state.editingRow.fold( + () => null, + (editingRow) { + WidgetsBinding.instance.addPostFrameCallback((_) { + if (editingRow.index != null) { + context + .read() + .add(BoardEvent.endEditRow(editingRow.row.id)); + } else { + scrollManager.scrollToBottom(editingRow.columnId, () { + context + .read() + .add(BoardEvent.endEditRow(editingRow.row.id)); + }); + } + }); + }, + ); + } + @override void dispose() { scrollController.dispose(); diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart index f707a29381..02ab521222 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart @@ -6,6 +6,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'board_cell.dart'; +import 'define.dart'; class BoardTextCell extends StatefulWidget with EditableCell { final String groupId; @@ -29,6 +30,7 @@ class BoardTextCell extends StatefulWidget with EditableCell { class _BoardTextCellState extends State { late BoardTextCellBloc _cellBloc; late TextEditingController _controller; + bool focusWhenInit = false; SingleListenerFocusNode focusNode = SingleListenerFocusNode(); @override @@ -38,6 +40,7 @@ class _BoardTextCellState extends State { _cellBloc = BoardTextCellBloc(cellController: cellController) ..add(const BoardTextCellEvent.initial()); _controller = TextEditingController(text: _cellBloc.state.content); + focusWhenInit = widget.isFocus; if (widget.isFocus) { focusNode.requestFocus(); @@ -46,6 +49,12 @@ class _BoardTextCellState extends State { focusNode.addListener(() { if (!focusNode.hasFocus) { _cellBloc.add(const BoardTextCellEvent.enableEdit(false)); + + if (focusWhenInit) { + setState(() { + focusWhenInit = false; + }); + } } }); @@ -77,38 +86,19 @@ class _BoardTextCellState extends State { }, child: BlocBuilder( builder: (context, state) { - Widget child; - if (state.content.isEmpty && state.enableEdit == false) { - child = const SizedBox(); - } else { - if (state.enableEdit) { - child = TextField( - controller: _controller, - focusNode: focusNode, - onChanged: (value) => focusChanged(), - onEditingComplete: () => focusNode.unfocus(), - maxLines: 1, - style: const TextStyle( - fontSize: 14, - fontWeight: FontWeight.w500, - fontFamily: 'Mulish', - ), - decoration: const InputDecoration( - // Magic number 4 makes the textField take up the same space as FlowyText - contentPadding: EdgeInsets.symmetric(vertical: 4), - border: InputBorder.none, - isDense: true, - ), - ); - } else { - child = FlowyText.medium(state.content, fontSize: 14); - child = Padding( - padding: const EdgeInsets.symmetric(vertical: 6), - child: child, - ); - } + if (state.content.isEmpty && + state.enableEdit == false && + focusWhenInit == false) { + return const SizedBox(); } + // + Widget child; + if (state.enableEdit || focusWhenInit) { + child = _buildTextField(); + } else { + child = _buildText(state); + } return Align(alignment: Alignment.centerLeft, child: child); }, ), @@ -127,4 +117,36 @@ class _BoardTextCellState extends State { focusNode.dispose(); super.dispose(); } + + Widget _buildText(BoardTextCellState state) { + return Padding( + padding: EdgeInsets.symmetric( + vertical: BoardSizes.cardCellVPadding, + ), + child: FlowyText.medium(state.content, fontSize: 14), + ); + } + + Widget _buildTextField() { + return TextField( + controller: _controller, + focusNode: focusNode, + onChanged: (value) => focusChanged(), + onEditingComplete: () => focusNode.unfocus(), + maxLines: 1, + style: const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w500, + fontFamily: 'Mulish', + ), + decoration: InputDecoration( + // Magic number 4 makes the textField take up the same space as FlowyText + contentPadding: EdgeInsets.symmetric( + vertical: BoardSizes.cardCellVPadding + 4, + ), + border: InputBorder.none, + isDense: true, + ), + ); + } }