Text with different styles in TextField cause the cursor to stall on web. #68633
Description
I'm creating a custom TextEditingController to support for different styles within a single textfield. So I have overridden the ### buildTextSpan function in a child class of TextEditingController like this:
class NewTextEditingController extends TextEditingController {
NewTextEditingController({String text})
: assert(text != null),
super(text: text);
@override
TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
return TextSpan(
children: [TextSpan(text: text.substring(0, 2)),
TextSpan(text: text.substring(2),style: TextStyle(fontWeight: FontWeight.w700))], style: style);
}
}
This controller just displays the first letters of the textfield as regular weight and the remaining part as bold.
Then I modified the _MyHomePageState class in the default application to have a textfield in a listview like this:
class _MyHomePageState extends State<MyHomePage> {
NewTextEditingController controller = new NewTextEditingController(text: "test");
@override
Widget build(BuildContext context) {
return Scaffold(
body: Material(
color: Colors.white,
child: ListView(
children: [
TextField(
controller: controller,
)
],
),
),
);
}
}
And while on mobile it works just fine:
On web the cursor doesn't move from the initial position (0) and the text just gets added at the end. Selection is also not possible.
Futter doctor:
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 1.24.0-2.0.pre.86, on Microsoft Windows [Version ], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.5.4)
[√] Android Studio (version 4.0)
[√] VS Code, 64-bit edition (version 1.49.3)
[√] Connected device (3 available)
• No issues found!