flutter web on mobile - cursor is misplaced when clicking TextField

I use --web-renderer canvaskit and it looks like it improves cursor position while typing, but if I click on the end of the text in the textfield (for example if I want to come back to it), the cursor goes to the beginning. Even if I click again at the end, it again goes to the beginning. If I click in the middle, it works OK.
Tested on Chrome. Happens only on mobile and Chrome's device toolbar on Windows, even though I was using --web-renderer canvaskit (I thought it should behave the same).

@ronytesler

@ronytesler
Can you provide flutter doctor -v and a complete minimal reproducible code sample that we can directly copy paste and run to verify this issue ?

@darshankawar

@darshankawar
code:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
        localizationsDelegates: [
          GlobalCupertinoLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
      supportedLocales: [
        Locale('en', ''),
        Locale('he', 'IL'),
      ],
      locale: Locale('he', 'IL'),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: TextField(
                textDirection: TextDirection.rtl,
                decoration: InputDecoration(
                  labelText: "שם פרטי",
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: TextField(
                textDirection: TextDirection.rtl,
                decoration: InputDecoration(
                  labelText: "שם משפחה",
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

I reproduced with flutter run --release --web-renderer canvaskit -d chrome, using device toolbar.

flutter doctor -v:

    • Flutter version 2.0.5 at c:\flutter\flutter
    • Framework revision adc687823a (7 days ago), 2021-04-16 09:40:20 -0700
    • Engine revision b09f014e96
    • Dart version 2.12.3

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Rony\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Users\Rony\AppData\Local\Android\sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • 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 1.8.0_242-release-1644-b01)

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 90.0.4430.72
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 90.0.818.42

• No issues found!```

@ronytesler

@ronytesler
Can you also provide your pubspec.yaml. I am getting compile error on import 'package:flutter_localizations/flutter_localizations.dart'; even after adding the said dependency.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

@darshankawar

@darshankawar

name: bug
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Thanks for the code sample and details. I see the same behavior on mobile web.

flutter doctor -v

[✓] Flutter (Channel master, 2.2.0-11.0.pre.274, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.2.0-11.0.pre.274 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d1f73a1065 (2 days ago), 2021-04-24 00:44:02 -0400
    • Engine revision eba9efd1c3
    • Dart version 2.14.0 (build 2.14.0-37.0.dev)

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 90.0.4430.85

! Doctor found issues in 1 category.

This or closely related issue are still very much a bug it seems:

FLUTTER WEB TEXTFIELD major issue: cursor goes to wrong place after tap on Android and iOS, particularly for longer text blocks present in the field

#124483

This or closely related issue are still very much a bug it seems:

FLUTTER WEB TEXTFIELD major issue: cursor goes to wrong place after tap on Android and iOS, particularly for longer text blocks present in the field

#124483

We are seeing this issue on web in mobile environments

This issue is marked P1 but has had no recent status updates.

The P1 label indicates high-priority issues that are at the top of the work list. This is the highest priority level a bug can have if it isn't affecting a top-tier customer or breaking the build. Bugs marked P1 are generally actively being worked on unless the assignee is dealing with a P0 bug (or another P1 bug). Issues at this level should be resolved in a matter of months and should have monthly updates on GitHub.

Please consider where this bug really falls in our current priorities, and label it or assign it accordingly. This allows people to have a clearer picture of what work is actually planned. Thanks!

Duplicate of #124483

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

flutter web on mobile - cursor is misplaced when clicking TextField #81013

17 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

flutter web on mobile - cursor is misplaced when clicking TextField #81013

Description

Activity

darshankawar commented on Apr 23, 2021

ronytesler commented on Apr 23, 2021

darshankawar commented on Apr 23, 2021

ronytesler commented on Apr 23, 2021

darshankawar commented on Apr 26, 2021

17 remaining items

hhkk commented on Apr 9, 2023

desimmons commented on May 18, 2023

flutter-triage-bot commented on Jul 29, 2023

mdebbar commented on Aug 10, 2023

github-actions commented on Aug 25, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions