[web] TextField double caret on iOS

[OblackatO]

Steps to Reproduce

1. Run the following code in the lib/main.dart file in a newly created flutter project in safari version 9.0.x:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
       _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
            keyboardType: TextInputType.emailAddress,
            decoration: 
              InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter text here'
              ),
            ),
            TextFormField(
              keyboardType: TextInputType.numberWithOptions(signed:true, decimal:true),
              decoration: 
                InputDecoration(
                  labelText: 'Enter text here'
                ),
            ),
          ],
        ),
      )// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

2. flutter run -d web

Expected results:
No double caret. Keyboard type of 1st input field for emails and keyboard type of 2nd input field for numbers.

Actual results:
Double caret, keyboard is similar to both input fields.

Flutter doctor output:

[√] Flutter (Channel beta, 1.23.0-18.1.pre, on Microsoft Windows [Version 10.0.19041.630], locale en-150)
    • Flutter version 1.23.0-18.1.pre at C:\flutter
    • Framework revision 198df796aa (5 weeks ago), 2020-10-15 12:04:33 -0700
    • Engine revision 1d12d82d9c
    • Dart version 2.11.0 (build 2.11.0-213.1.beta)

[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


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

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] VS Code (version 1.51.1)
    • VS Code at C:\Users\Pedro\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.16.0

[√] Connected device (3 available)
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 86.0.4240.198
    • Edge (web)       • edge       • web-javascript • Microsoft Edge 85.0.564.67

! Doctor found issues in 2 categories.

Remarks:

• Note that I cannot reproduce this problem in more modern browsers. Only on safari 9.0.x, in my case I am using an iPad mini simulator with iOS version 9. On a real iPad the results are the same. You can also directly access this testing website
  Please see this short video I uploaded on dropbox to have a visual view of the problem
• I do not have android studio installed, because I do not need it. So ignore that on the doctor output.

[TahaTesser]

As expected based on your remakes, no issues on Safari 14 on iPad 8

flutter doctor -v

[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on macOS 11.0.1 20B29 darwin-x64,
    locale en-GB)
    • Flutter version 1.24.0-10.2.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision 022b333a08 (2 days ago), 2020-11-18 11:35:09 -0800
    • Engine revision 07c1eed46b
    • Dart version 2.12.0 (build 2.12.0-29.10.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

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

[✓] Android Studio (version 4.1)
    • Android Studio at /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
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS
      14.2
    • Web Server (web)     • web-server                • web-javascript •
      Flutter Tools
    • Chrome (web)         • chrome                    • web-javascript • Google
      Chrome 87.0.4280.67

• No issues found!

[OblackatO]

I updated the website where I tested the input with more varieties of input fields from external libraries as well. The results are similar.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_input/flutter_input.dart';
import 'package:easy_text_input/easy_text_input.dart' as ezi;
import 'dart:async';
import 'package:rxdart/rxdart.dart';


class Validators {
  static StreamTransformer<String, String> validateInputHasMin(int size,
      [String message]) {
    return StreamTransformer<String, String>.fromHandlers(handleData: (
      String value,
      EventSink<String> sink,
    ) {
      if (value == null || value.isEmpty) {
        sink.add(null);
        return;
      }
      if (value.length >= size) {
        sink.add(value);
      } else {
        sink.addError(message);
      }
    });
  }

  static StreamTransformer<String, String>
      validateInputHasExactNumberOfCharacters(int characters,
          [String message]) {
    return StreamTransformer<String, String>.fromHandlers(handleData: (
      String value,
      EventSink<String> sink,
    ) {
      if (value == null || value.isEmpty) {
        sink.add(null);
        return;
      }

      if (value.length == characters) {
        sink.add(value);
      } else {
        sink.addError(message);
      }
    });
  }
}

class ExampleBloc {
  final phoneCharactersAmount = 15;
  final minPasswordCharacters = 5;

  final BehaviorSubject<String> _phone = BehaviorSubject<String>();
  final BehaviorSubject<String> _password = BehaviorSubject<String>();

  Stream<String> get phone => _phone.stream.transform(
      Validators.validateInputHasExactNumberOfCharacters(phoneCharactersAmount,
          'The phone number must have exaclty 11 numbers'));

  Stream<String> get password =>
      _password.stream.transform(Validators.validateInputHasMin(
          minPasswordCharacters,
          'The password must have at least 5 characters'));

  Function get sinkPhone => _phone.sink.add;

  Function get sinkPassword => _password.sink.add;

  String get phoneValue => _phone.value;

  String get passwordValue => _password.value;

  void dispose() {
    _phone.close();
    _password.close();
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var textEditingController = TextEditingController(text: "RAW EDITABLE INPUT TEXT");
  var textEditingController2 = TextEditingController();
  final exampleBloc = ExampleBloc();

  

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  void changed_function(text) {
    debugPrint("InputField of ezi changed.");
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'TextField obscured',
              ),
            ),
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'TextField not obscured',
              ),
            ),
            Container(
              height: 40,
            ),
            EditableText(
              controller: this.textEditingController,
              focusNode: FocusNode(debugLabel: 'editable_text'),
              autocorrect: false,
              style: TextStyle(color: Colors.amber),
              cursorColor: Colors.black12,
              backgroundCursorColor: Colors.transparent
            ),
            Container(
              height: 40,
            ),
            EditableText(
              controller: this.textEditingController2,
              focusNode: FocusNode(debugLabel: 'editable_text'),
              autocorrect: false,
              style: TextStyle(color: Colors.amber),
              cursorColor: Colors.black12,
              backgroundCursorColor: Colors.transparent
            ),
            Container(
              height: 40,
            ),
            InputKeyboard<String>(
              decoration: 
                InputDecoration(
                  labelText: 'Name *',
                  icon: Icon(Icons.person),
                  hintText: 'InputKeyboard<String> from lib flutter_input',
                ),
              path: 'user.name',
            ),
            Container(
              height: 20,
            ),
            ezi.InputField(
              stream: this.exampleBloc._phone,
              labelText: 'EZI INPUT text field from easy_input',
              onChanged: this.changed_function,
            ),
          ],
        ),
      )// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}


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

pubspec.yaml

name: flutter_input_x
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_input: ^1.3.0
  keyboard_actions: "^3.3.1+1"
  easy_text_input: ^1.0.2
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  rxdart: ^0.24.1

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

[mdebbar]

These are two separate problems. I'll keep this issue for the double caret problem. @OblackatO could you please open a new issue for the keyboard type problem? Please mention me on the issue to make sure I'm notified.

[OblackatO]

I found an alternative to google flutter and no longer use it. Thank you for your input though.

[mdebbar]

Let's keep this issue open since other users are also experiencing the same problem.

[doppio]

This is a major issue for iOS users of my Flutter web app in production. Any thoughts on what's going on here?

[borjandev]

The double caret on iOS issue is quite frustrating and it’s reproducable on latest master as of this moment : 2.3.0-1.0.pre.229

@mdebbar If I understand this correctly, Flutter renders it’s own cursor, which ideally, would be fully in sync with the browser cursor to the point that they are indistinguishable?

When they get out of sync, for various reasons (I suspect one of them is programatically modifying the TextField via TextEditingController directly), we end up with dual cursors?

Would a potential workaround be hiding the default browser cursor or setting it’s color property to a transparent color?

Since it’s only happening on web, maybe modifying Index.html manually, to force hide the browser cursor, would be a potential temporary workaround?

[wl1395182472]

The double caret on iOS issue is quite frustrating and it’s reproducable on latest master as of this moment : 2.3.0-1.0.pre.229

@mdebbar If I understand this correctly, Flutter renders it’s own cursor, which ideally, would be fully in sync with the browser cursor to the point that they are indistinguishable?

When they get out of sync, for various reasons (I suspect one of them is programatically modifying the TextField via TextEditingController directly), we end up with dual cursors?

Would a potential workaround be hiding the default browser cursor or setting it’s color property to a transparent color?

Since it’s only happening on web, maybe modifying Index.html manually, to force hide the browser cursor, would be a potential temporary workaround?

how can i modifying Index.html to fix this for few time?please

[htoor3]

Just to confirm, is this issue only occurring on old versions of safari (< 10)? And does upgrading to a modern version resolve it?