Repository navigation
Incorrect horizontal caret movement with Unicode combining characters #98516
Description
Steps to Reproduce
-
Execute
flutter runon the code sample (just a text field) -
Paste "Zalgo" unicode combining characters abuse string to the text field: Zalgo
Expected results: Can move the caret between all character using keyboard left/right arrows
Actual results: Caret is stuck before the first character on first right arrow keypress, then jumps over two characters.
Interestingly when selecting text using Shift + right arrow the issue isn't there.
Code sample
import '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 MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() { _counter++; });
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
const Expanded(
child: TextField(maxLines: null),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}Logs
flutter doctor -v
[√] Flutter (Channel master, 2.11.0-0.0.pre.562, on Microsoft Windows [Version 10.0.19044.1526], locale en-US)
• Flutter version 2.11.0-0.0.pre.562 at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2a2f973120 (2 hours ago), 2022-02-15 07:33:57 -0800
• Engine revision e683e0cd3b
• Dart version 2.17.0 (build 2.17.0-105.0.dev)
• DevTools version 2.10.0
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.8)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.11.32002.261
• Windows 10 SDK version 10.0.19041.0
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
[√] VS Code, 64-bit edition (version 1.64.2)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.34.0
[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.1526]
• Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.99
• Edge (web) • edge • web-javascript • Microsoft Edge 98.0.1108.43
[√] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 2 categories.
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listRunning on desktopEntering text in a text field or keyboard related problemsIt was better in the past than it is nowFound to occur in 2.10Found to occur in 2.11flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer version
Activity
[-]Incorrect caret jump in Zalgo test[/-][+]Incorrect horizontal caret movement in Zalgo test[/+][-]Incorrect horizontal caret movement in Zalgo test[/-][+]Incorrect horizontal caret movement with Unicode combining characters[/+]maheshj01 commentedon Feb 16, 2022
Hi @tgucio, Thanks for filing the issue. I am able to reproduce the issue on the master channel and it works fine on the stable channel. On the master channel, The first two characters are skipped when pressing the arrow keys
macOS output
Screen.Recording.2022-02-16.at.4.15.57.PM.mov
Screen.Recording.2022-02-16.at.4.33.34.PM.mov
Windows output
warnings.2022-02-16.10-38-05_Trim.mp4
warnings.2022-02-16.10-30-54_Trim.mp4
flutter doctor -v (macOS)
flutter doctor -v (windows)
✅ : No Issue
❌: Issue reproduced
Labeling the issue as a regression
tgucio commentedon Feb 17, 2022
Great, thanks for capturing the videos - a lot easier to understand!
cbracken commentedon Feb 17, 2022
/cc @justinmc @cbracken
gspencergoog commentedon Jan 19, 2023
Could #118403 be a new incident of this?
tgucio commentedon Jan 19, 2023
@gspencergoog I think they could be separate issues - here it's simple (albeit abused a bit) combining characters, #118403 is when text shaping (glyph substitution + positioning) kicks in.
justinmc commentedon Jan 21, 2023
Just as some quick analysis, the "Zalgo" string in the description is of length 50 but contains 5 characters. The arrow keys correctly traverse the string in 5 key presses, but the cursor never appears visually between the first and second characters as noted above.
Screencast.from.2023-01-20.16-38-08.webm
Here's the code that decides where to put the selection when the left arrow key is pressed (and
trailingjust below for the right arrow):flutter/packages/flutter/lib/src/services/text_boundary.dart
Line 74 in 1cdaf9e
That appears to be working correctly at first glance. I wonder if the problem is drawing the cursor in the incorrect visual place given a correct TextSelection?
Fix out-of-bounds and reversed TextBox queries in computing caret met…
gnprice commentedon Mar 12, 2023
This turned out to have the same cause as #118403 after all, as well as #50563; I've just sent a fix as #122480. It also turns out to be purely within the framework.
github-actions commentedon Apr 11, 2023
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
flutter doctor -vand a minimal reproduction of the issue.