Programmatically select text in unfocused textfield not working #96339
Comments
|
+1 |
|
This recent change breaks our text editor capabilities. |
|
Hi @imaachman, Thanks for filing the issue. I am able to reproduce the issue on stable and the master channel and It is working fine on Code sample in the original post
flutter doctor -vcc: @gspencergoog |
maheshmnj
added
a: text input
maheshmnj
changed the title
HansMuller
added
the
f: material design
|
CC @justinmc |
|
Here's the PR that caused this: #86796. CC @LongCatIsLooong I want to say that this is working as intended, but I think that @searchy2 mentions something that is a bug in #96339 (comment). I just tried this on native Mac and web, and selection isn't shown when the field doesn't have focus. Flutter should probably match that behavior. I think the real bug is that there should be a way to prevent the focus from going to a button, for example in the case of @searchy2's bold etc. buttons. I think the issue that addresses this problem is #86972. I specifically brought up the bold button thing here. The solution there may be to refactor FocusTrap. @imaachman @searchy2 Do you guys agree with that assessment? Is solving #86972 the way to fix the problems you're having? |
|
@justinmc You're right about buttons and FocusTrap refactor might be a solution to that problem. However, our text editor also has text fields for entering the font size, spacing, etc. In that scenario, user needs to focus on the property text field to edit it. We want to keep the selection intact in the main text field so that user know exactly which characters are being edited. That's why we need the control of selection UI even when a text field loses focus. I hope this makes sense. |
Off topicThe FocusManager is one of our biggest problems that we're constantly fighting to get to work as expected.The issue is we don't have control or visibility into what is currently focused. Many of our features depend upon focus but we don't know what is focused! There are two things that would probably solve 80% of the issues we're running into.
|
|
@searchy2 The You might want to also check out this article for more details on the focus system. Your comment is off-topic for this issue. If you have more questions, please ask on Discord or in Stack Overflow. If you have a feature request, please file a separate issue. |
|
Thank you @gspencergoog for the info and the link to that article. |
|
This should be fixed in master as of #107262. @imaachman let me know if you've still got any problems here. You'll have to wrap anything that shouldn't steal focus from a text field in TextFieldTapRegion. Below I've modified the original code sample from this issue to make it work: Codeimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late final TextEditingController controller;
late final FocusNode focusNode;
@override
void initState() {
super.initState();
focusNode = FocusNode(debugLabel: 'TextField FocusNode');
controller = TextEditingController();
controller.text = 'Select this text';
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 200,
child: TextField(
focusNode: focusNode,
controller: controller,
),
),
const SizedBox(width: 16),
IconButton(
tooltip: 'Focus text field',
onPressed: () => focusNode.requestFocus(),
icon: const Icon(Icons.center_focus_strong),
),
],
)),
// NEW: Add TextFieldTapRegion around things that shouldn't steal focus
// from text fields.
floatingActionButton: TextFieldTapRegion(
child: FloatingActionButton(
onPressed: () {
// NEW: You'll have to request focus here if you also want the field
// to gain focus.
focusNode.requestFocus();
controller.selection = controller.selection
.copyWith(baseOffset: 0, extentOffset: controller.text.length);
},
tooltip: 'Select text',
child: const Icon(Icons.select_all_rounded),
),
),
);
}
@override
void dispose() {
focusNode.dispose();
controller.dispose();
super.dispose();
}
} |
|
@justinmc Thank you for creating But it does not help in our use case, which is, text selection being intact even if the text field is unfocused. Here's what I exactly mean: https://www.loom.com/share/36225c2fdeec495ebf69284af45b10d1 In this example, the selection UI remains intact when FAB is pressed because the field does not lose focus. But when we tap on the second text field (and focus is shifted), the selection UI disappears. We do not want that to happen because the user should know which characters are currently selected when they try to edit the font size using second text field. Reference Codeimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late final TextEditingController controller;
late final FocusNode focusNode;
@override
void initState() {
super.initState();
focusNode = FocusNode(debugLabel: 'TextField FocusNode');
controller = TextEditingController();
controller.text = 'Select this text';
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 200,
child: TextField(
focusNode: focusNode,
controller: controller,
),
),
const SizedBox(width: 16),
IconButton(
tooltip: 'Focus text field',
onPressed: () => focusNode.requestFocus(),
icon: const Icon(Icons.center_focus_strong),
),
],
),
const SizedBox(
width: 200,
child: TextFieldTapRegion(
child: TextField(
decoration: InputDecoration(hintText: 'Enter font size'),
),
),
),
],
)),
// NEW: Add TextFieldTapRegion around things that shouldn't steal focus
// from text fields.
floatingActionButton: TextFieldTapRegion(
child: FloatingActionButton(
onPressed: () {
// NEW: You'll have to request focus here if you also want the field
// to gain focus.
// focusNode.requestFocus();
// controller.selection = controller.selection
// .copyWith(baseOffset: 0, extentOffset: controller.text.length);
},
tooltip: 'Select text',
child: const Icon(Icons.select_all_rounded),
),
),
);
}
@override
void dispose() {
focusNode.dispose();
controller.dispose();
super.dispose();
}
} |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
Steps to Reproduce
flutter runon the code sample or run it in DartPad.Expected results:
Selection UI should appear even when text field is not focused. This restriction wasn't there in earlier versions of Flutter and has been added recently.
Actual results:
Selection UI appears only when text field has focus.
Code sample
Logs
flutter run --verbose
flutter analyze
flutter doctor -v
Video Demo
Link to video: https://www.loom.com/share/60e3a165a06e42ee84890a32d6fbc9f6
The text was updated successfully, but these errors were encountered: