Flutter web textfield on iOS: cursor goes to completely wrong place after tap on text

Keep in mind - one can't edit text if you can't place the cursor at least very nearby an intended location on tap.

As run in chrome and safari browsers on android and ios cell phones, after many experiments including a simple flutter dev cookbook case we ask...

seen in flutter version 3.2.2 stable and 3.7.10 stable on 3 people's environments.

issue is also seen using http-server against release flutter build web (build/web) content.

To demonstrate:

Open this url on a cell phone
https://docs.flutter.dev/cookbook/forms/focus

1 in the cookbook dev code editor add:
maxLines: 5

2 click run

3 in the textfield, paste the ~1500 char's "lorem ipsum" text below.

4 tap various places within the text (once the on screen keyboard settles) and

5 !!!!!! issue: you will see cursor does not end up where the tap occurred. bounces to other places, with underlines and confused attempts at hi-lighting I guess

6 this is just one environment to demo this issue in. I've tried many different tests. (I'd be happy to see even one TextField example where this does not occur, on a cell phone.)

sample text to paste:

Lorem ipsum dolor sit amet, dictas habemus nominati ex sed, possit prodesset concludaturque sed ei, usu ut falli constituam. Mea ad ipsum graeci aliquip, iisque volumus theophrastus sit id. Nec ei sumo democritum, qui dicant inimicus repudiare no. Duo no hinc partem ornatus, ei voluptua moderatius eloquentiam cum, pri modus viderer vituperatoribus ad. Ea sea dicunt vidisse sadipscing.

Ut aliquid bonorum definitiones sit, at delenit utroque adversarium ius. At vocent imperdiet definitiones eum. Vulputate dissentiet eu eos, vis virtute urbanitas reprimique et, adhuc errem reprimique eos eu. Duo utinam doctus concludaturque an, ne alienum constituam per.

Rebum impedit volumus ad qui, mei epicurei reprehendunt ad. Mel magna deleniti appetere ex, ex lobortis inciderint quo, saepe vidisse impedit an vim. Legendos deseruisse usu ei, eu nominavi facilisi iudicabit eum. Mel et iracundia torquatos, iudico platonem inciderint nec an, reprimique necessitatibus duo eu.

Enim iusto nec ei, pri no erat mollis erroribus. Usu ex natum cotidieque philosophia, ius cu alienum omittam. Pro dico congue utamur et, vix duis delenit deterruisset ne, te vero atqui usu. Mucius volutpat intellegam duo ea, adhuc putent tacimates mei ex.

Ut falli impetus honestatis est, id sed decore perpetua principes. Animal electram tractatos eam at. An cum dicunt option timeam, maiorum accumsan nominavi pro ad. Mel ne sint disputationi. Cu mea tibique persequeris, an ius wisi cetero.

END SAMPLE TEXT

also we tried many cell phone textfield examples using

flutter run -d web-server --web-port $1 --web-hostname 0.0.0.0

FLUTTER DOCTOR

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.10, on macOS 12.5.1 21G83 darwin-x64, locale
    en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.
[!] Xcode - develop for iOS and macOS (Xcode 14.2)
    ! CocoaPods 1.8.4 out of date (1.11.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
[✓] Android Studio (version 3.5)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
[✓] VS Code (version 1.43.2)
[✓] VS Code (version 1.76.2)
[✓] VS Code (version 1.68.1)
[✓] VS Code (version 1.40.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

this issue can also manifest with shorter text blocks say 100-300 char's

and also when there is no induced TextField scroll, given small font and larger maxLines

@hhkk

Thanks for the report @hhkk
Looks like your issue is closely related / similar to #120604 ?
Can you check and confirm ?

It is probably a related issue but not the same. that one focused on end of line tap. this issue concerns tapping almost anywhere.

So with the version here i still get the fail unfortunately :(
Flutter 3.10.0-2.0.pre.30 • channel master •
Built using flutter build web --release
Run on pixel 7

Problem happens easily ...

Test program is below (from the dev cookbook https://docs.flutter.dev/cookbook/forms/focus

maxLines: 5) (you can ignore the second text field and the button - just part of the original example )

lorem ipsum test data is above in comments. Probably don't need 1500 char's of test data.

This is a blocking issue for me and others. Any help so much appreciated.

code sample


import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Text Field Focus',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Define the focus node. To manage the lifecycle, create the FocusNode in
  // the initState method, and clean it up in the dispose method.
  late FocusNode myFocusNode;

  @override
  void initState() {
    super.initState();

    myFocusNode = FocusNode();
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    myFocusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Field Focus'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // The first text field is focused on as soon as the app starts.
            const TextField(
maxLines: 5,
              autofocus: true,
            ),
            // The second text field is focused on when a user taps the
            // FloatingActionButton.
            TextField(
              focusNode: myFocusNode,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // When the button is pressed,
        // give focus to the text field using myFocusNode.
        onPressed: () => myFocusNode.requestFocus(),
        tooltip: 'Focus Second Text Field',
        child: const Icon(Icons.edit),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

@hhkk

@hhkk
So I tried the same as you mentioned above and observed that upon trying to tap on the given text, it takes me to the end of the line as shown below:

RPReplay-Final1681193580.MP4

I scrolled all the way up in the textfield and tried to tap, but it took me to the end of the text everytime. Also, while trying to tap in the middle of the text, instead of showing the cursor, it shows me highlighted text which I think is already reported in one of the linked / related issues.

Are you seeing the same behavior as I see from the video ? If not, a short video of the behavior would be helpful.

Good, so you see issues as well. I will verify and get back with more test results, but on a two minute review, the issues you describe are at least similar if not overlapping to mine.

Are these issues you described something slated for fix soon? They make the text field unusable for me.

If not slated for fix soon, do you know if the issues are limited to longer text strings (eg a particular string length)?

I will get back to you with more complete test. Let me know how else I can help.

Thank you

Further testing confirms: I see no issues separate from what you mention. (However where you show blocks for highlighted region, I show mostly underlines. If I press enough times/erratically enough, only then do I see block rather than underline. Images herein show both underline only, and block/underline together.

Do you expect these issues to be resolved any time soon? Alternative approach to use in the meantime?

If you know the issue # that you suspect replaces this one, please include here. I read several related issues but I don't think I saw quite the issue - or at least as clearly as you described it - occurring.

#120604 refers to persian text and clicking at the end. Whereas this item is for any text and clicking anywhere - perhaps requiring a multiline text of longer length such as > 100 or > 300 char's. So I"m not certain it's the same issue.

Thank you

FYI - here is a list of all related issues i have found

search key: https://github.com/flutter/flutter/issues?q=is%3Aissue+tap+cursor+textfield

#124483 this

#98720 [Android] TextField cursor doesn't move to tapped position, but converts into text selection mode after selecting input mode from virtual keyboard. #98720

#100004 two exclamation points

#121164 feb 21 2023 Text field cursor position in RTL goes to the penultimate character

#122443 mar 10 2023 Failed assertion when trying to set caret position to text position that is not visible

#118566 jan 16 2023 Text field cursor position in RTL goes to the penultimate character

#114433 not 2022 TextField's cursor cannot move in the middle of the word

#120604 feb 13 TextField cursor stands in a wrong position while using persian words

#109175 aug 2022 cursor is not inserting value at the specific position where i tapped when readOnly mode is enabled in textformField

#100004 mar 2022 tap to move cursor in textfield not working on android

As I've reviewed and thought about the above list of issues and this one, this problem is not addressed in prior issues in my opinion.

the iphone version demonstrating this is
iPhone 12 Pro Max
iOS Version 16.3.1

correction: on further testing, we see that the magnifier is good but it can be also be difficult with the magnifier to place cursor in the exact location reliably.

@hhkk

@hhkk Thank you for the notes! So currently selection placement in iOS only works reliably with the magnifier (long press + drag)?

I'm on the current beta version and the magnifier seems like the only mostly reliable way to place a cursor on an iphone. I say MOSTLY reliable because it still can feel clunky with the magnifier in some situations. It seems like placing the cursor in the bottom portion of the text field is more trouble some than the top. We have tested an iPhone SE and an iPhone 12 both on iOS. Android seems better. I am using default. Renderer. Is default renderer good for multi-line purposes? If it would be helpful, I can try to be more systematic in my testing and give you some information about results. Thank you Henry

…

On Fri, Aug 18, 2023, 11:13 AM Hassan ***@***.***> wrote: @hhkk <https://github.com/hhkk> Thank you for the notes! So currently selection placement in iOS only works reliably with the magnifier (long press + drag)? — Reply to this email directly, view it on GitHub <#124483 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAF34OGOEVBNQCINV5CW4YTXV6BBDANCNFSM6AAAAAAWYILTEE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

@htoor3

This issue is assigned to @htoor3 but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

Related? #167805

Web - Fix selection jump on Chrome for Android (flutter-team-archive/…

Navigation Menu

Repository navigation

Flutter web textfield on iOS: cursor goes to completely wrong place after tap on text #124483

46 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Flutter web textfield on iOS: cursor goes to completely wrong place after tap on text #124483

Description

Activity

hhkk commented on Apr 9, 2023

darshankawar commented on Apr 10, 2023

hhkk commented on Apr 10, 2023

darshankawar commented on Apr 11, 2023

hhkk commented on Apr 11, 2023

hhkk commented on Apr 11, 2023

hhkk commented on Apr 11, 2023

hhkk commented on Apr 12, 2023

hhkk commented on Apr 12, 2023

46 remaining items

hhkk commented on Aug 18, 2023

htoor3 commented on Aug 18, 2023

hhkk commented on Aug 18, 2023

flutter-triage-bot commented on Jan 5, 2024

justinmc commented on May 1, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions