Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Web][HTML]: cursor offset is incorrect when typing CJK #148271

Open
JAICHANGPARK opened this issue May 14, 2024 · 1 comment
Open

[Web][HTML]: cursor offset is incorrect when typing CJK #148271

JAICHANGPARK opened this issue May 14, 2024 · 1 comment
Labels
a: internationalization Supporting other languages or locales. (aka i18n) a: text input Entering text in a text field or keyboard related problems c: regression It was better in the past than it is now e: web_html HTML rendering backend for Web engine flutter/engine repository. See also e: labels. found in release: 3.22 Found to occur in 3.22 fyi-text-input For the attention of Text Input team has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically team-web Owned by Web platform team

Comments

@JAICHANGPARK
Copy link

JAICHANGPARK commented May 14, 2024 •
edited

Steps to reproduce

The flutter sdk used version 3.22. (stable channel)
This occurs when the renderer is set to HTML.
When setting a text field to allow multi-line input and entering Korean, the cursor position is displayed strangely.
There are no problems with English input.

 Container(
              margin: const EdgeInsets.symmetric(horizontal: 8),
              child: TextFormField(
                minLines: 4,
                maxLines: 15,
                focusNode: indicatorFocusNode,
                controller: indicatorTextEditingController,
                decoration: InputDecoration(
                  border: const OutlineInputBorder(),
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Color(0xffCDD4E0),
                    ),
                  ),
                ),
              ),
            ),

Thanks

Expected results

There should be no problem with the cursor display.

Actual results

This problem did not occur in version 3.19.

Screen.Recording.2024-05-14.at.9.05.55.AM.mov

Code sample

Code sample 
 Container(
              margin: const EdgeInsets.symmetric(horizontal: 8),
              child: TextFormField(
                minLines: 4,
                maxLines: 15,
                focusNode: indicatorFocusNode,
                controller: indicatorTextEditingController,
                decoration: InputDecoration(
                  border: const OutlineInputBorder(),
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Color(0xffCDD4E0),
                    ),
                  ),
                ),
              ),
            ),

Screenshots or Video

Screenshots / Video demonstration
Screen.Recording.2024-05-14.at.9.05.55.AM.mov

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.22.0, on Debian GNU/Linux 11 (bullseye) 4.14.186-146.268.amzn2.x86_64, locale en_US)
• Flutter version 3.22.0 on channel stable at /usr/local/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5dcb86f68f (4 days ago), 2024-05-09 07:39:20 -0500
• Engine revision f6344b75dc
• Dart version 3.4.0
• DevTools version 2.34.3
@danagbemava-nc danagbemava-nc added the in triage Presently being triaged by the triage team label May 14, 2024
@danagbemava-nc
Copy link
Member

Reproducible on the latest version of flutter. This is an issue with CJK when using the html renderer. It works as expected with the canvaskit renderer. This worked as expected on stable 3.19.6. It has regressed in 3.22

flutter doctor -v 
[!] Flutter (Channel [user-branch], 3.19.5, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    ! Flutter version 3.19.5 on channel [user-branch] at /Users/nexus/dev/sdks/flutter_rc/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter_rc/flutter. Consider adding /Users/nexus/dev/sdks/flutter_rc/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter_rc/flutter. Consider adding /Users/nexus/dev/sdks/flutter_rc/flutter/bin to the front of your path.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
    • Framework revision 300451adae (7 weeks ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
    • 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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (5 available)
    • Pixel 7 (mobile)     • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)       • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E                        • ios            • iOS 17.4.1 21E236
    • macOS (desktop)      • macos                                            • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)         • chrome                                           • web-javascript • Google Chrome 124.0.6367.202

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.


[!] Flutter (Channel stable, 3.22.0, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0 on channel stable at /Users/nexus/dev/sdks/flutter
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (5 days ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
    • 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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (6 available)
    • Pixel 7 (mobile)                • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)                  • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • Dean’s iPad (mobile)            • 00008103-000825C811E3401E                        • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                                            • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                            • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                                           • web-javascript • Google Chrome 124.0.6367.202

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 3.22.0-33.0.pre.5, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0-33.0.pre.5 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 21177cced4 (5 hours ago), 2024-05-14 01:06:32 -0400
    • Engine revision 84687fe0f1
    • Dart version 3.5.0 (build 3.5.0-152.0.dev)
    • DevTools version 2.36.0-dev.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
    • 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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (6 available)
    • Pixel 7 (mobile)                • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)                  • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • Dean’s iPad (mobile)            • 00008103-000825C811E3401E                        • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                                            • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                            • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                                           • web-javascript • Google Chrome 124.0.6367.202

[✓] Network resources
    • All expected network resources are available.

• No issues found!

@danagbemava-nc danagbemava-nc added a: text input Entering text in a text field or keyboard related problems c: regression It was better in the past than it is now engine flutter/engine repository. See also e: labels. platform-web Web applications specifically e: web_html HTML rendering backend for Web has reproducible steps The issue has been confirmed reproducible and is ready to work on team-web Owned by Web platform team found in release: 3.22 Found to occur in 3.22 a: internationalization Supporting other languages or locales. (aka i18n) and removed in triage Presently being triaged by the triage team labels May 14, 2024
@danagbemava-nc danagbemava-nc changed the title Flutter Web: cursor display error in text fields typing [Web][HTML]: cursor offset is incorrect when typing CJK May 17, 2024
@justinmc justinmc added the fyi-text-input For the attention of Text Input team label May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a: internationalization Supporting other languages or locales. (aka i18n) a: text input Entering text in a text field or keyboard related problems c: regression It was better in the past than it is now e: web_html HTML rendering backend for Web engine flutter/engine repository. See also e: labels. found in release: 3.22 Found to occur in 3.22 fyi-text-input For the attention of Text Input team has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically team-web Owned by Web platform team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@justinmc @JAICHANGPARK @danagbemava-nc