Flutter web textfield on iOS: cursor goes to completely wrong place after tap on text #124483
Description
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.