Repository navigation
The cursor height becomes shorter when I delete all characters from TextField #92080
Description
like the following picture:
flutter doctor -v
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.17763.2237], locale en-US)
• Flutter version 2.5.3 at D:\SDK\Flutter
• Upstream repository https://github.com/flutter/flutter.git
• FLUTTER_GIT_URL = https://gitee.com/mirrors/Flutter.git
• Framework revision 18116933e7 (4 days ago), 2021-10-15 10:46:35 -0700
• Engine revision d3ea636dc5
• Dart version 2.14.4
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at D:\SDK\Android
• Platform android-30, build-tools 30.0.3
• ANDROID_HOME = D:\SDK\Android
• ANDROID_SDK_ROOT = D:\SDK\Android
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
• All Android licenses accepted.
[√] Chrome - develop for the web
• CHROME_EXECUTABLE = C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.5)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.11.31729.503
• Windows 10 SDK version 10.0.19041.0
[√] Android Studio (version 4.2)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
[√] IntelliJ IDEA Community Edition (version 2021.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.2.3
• Flutter plugin version 61.2.4
• Dart plugin version 212.5486
[√] VS Code (version 1.55.2)
• VS Code at C:\Users\Zhanghuifeng\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.15.0
[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.17763.2237]
• Chrome (web) • chrome • web-javascript • unknown
• Edge (web) • edge • web-javascript • Microsoft Edge 94.0.992.50
• No issues found!
simple code
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: 'TextField Demo',
theme: ThemeData(primarySwatch: Colors.teal),
home: Scaffold(
body: Center(
child: SizedBox(
width: 200,
height: 80,
child: TextField(
controller: TextEditingController(text: "Hello"),
minLines: 1,
textAlignVertical: TextAlignVertical.center,
cursorHeight: 14,
decoration: InputDecoration(
border: const OutlineInputBorder(),
hintText: "HintText",
labelText: "LabelText",
hintStyle: const TextStyle(fontSize: 14),
labelStyle: const TextStyle(fontSize: 15),
counterText: "",
),
),
),
),
),
);
}
}
Activity
danagbemava-nc commentedon Oct 19, 2021
Hi @YowFung, thanks for filing the issue.
I just tried your sample and the cursor height remains the same. See screenshot below.
May I know what platform you're running your app on?
If there are more steps to reproduce too, kindly let me know.
screenshot
Thank you
YowFung commentedon Oct 19, 2021
Hi, @danagbemava-nc
I running it on the Windows platform.
danagbemava-nc commentedon Oct 19, 2021
Hi @YowFung, my question was poorly phrased.
I meant are you running the app or
android,webordesktop?Thank you
YowFung commentedon Oct 19, 2021
Hi @danagbemava-nc
Yes, I mean my app running on the Windows
desktopplatform. And it was also developed on the Windows platform.danagbemava-nc commentedon Oct 20, 2021
@YowFung, thanks for the clarification.
One question, is there any reason in particular you need to set the
cursorHeight?YowFung commentedon Oct 20, 2021
Hi, @danagbemava-nc
It always will get shorter whether the cursor height is set or not. Just doesn't look obvious.
When the cursor height is not be set:
danagbemava-nc commentedon Oct 20, 2021
I don't think it's just a matter of it becoming short. I played around with the values of the
cursorHeightand it shows an issue with the behaviour of the cursor.Reproducible on
stableandmaster.@YowFung, thanks for catching that.
videos
cursorHeight: defaultValueScreen.Recording.2021-10-20.at.13.11.53.mov
cursorHeight: 1Screen.Recording.2021-10-20.at.13.09.13.mov
cursorHeight: 32Screen.Recording.2021-10-20.at.13.07.05.mov
flutter doctor -v
7 remaining items
guidezpl commentedon Oct 26, 2021
Related/duplicate issues include #64072 and #61715 with some additional context. It might still be the case that this bug doesn't occur for iOS and macOS
navaronbracke commentedon Nov 7, 2021
I reported a similar issue #87790 a while ago. I decided to see if I could fix it myself. I found that the results of
TextPainter._computeCaretMetrics()are off. Or at least that is how it looks to me? I can still reproduce the weird cursor behaviour onmasterwhile testing on Android (a physical device).Should the initial metric not try to emulate a character,
to prevent resizing the caret / repositioning the caret on the y-axis? But this contradicts what @justinmc just said?
Some examples of the
_CaretMetricsresults that I found while testing:A single space character in EditableText yields some strange behaviour.
The metrics kept recomputing back and forth:
justinmc commentedon Dec 28, 2021
@GaryQian Digging into this it looks like there are some old TODOs of yours in the code related to this bug. Do you still have any plans or insight on fixing this?
flutter/packages/flutter/lib/src/rendering/editable.dart
Lines 2208 to 2214 in 7addb91
In that method and elsewhere there are
switchstatements that perform different behavior for Mac and iOS, which is probably why this bug doesn't seem to happen on those platforms.When there is text in the field it uses TextPainter. getFullHeightForCaret instead (code), and the caret height is correct.
PcolBP commentedon Jun 13, 2022
Issue is reproducible on Flutter 3.0.2 - Platform Android
jiangkang commentedon Jul 21, 2022
Issue is reproducible on Flutter 3.0.5 - Platform IOS
cursor-not-center.mp4
antOnioOnio commentedon Aug 11, 2022
Any news on this ? Anyone has come with a workaround?
justinmc commentedon Oct 5, 2022
CC @LongCatIsLooong, should be fixed with your upcoming cursor refactor.
github-actions commentedon Mar 28, 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.