fix: focus when SelectOptionCellEditor show

This commit is contained in:
appflowy 2022-09-20 16:49:19 +08:00
parent 5191b6af93
commit ba3f2f3c02

View File

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