Skip to content

[web] TextField double caret on iOS #70841

@OblackatO

Description

@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.
    );
  }
}

  1. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemse: OS-version specificAffects only some versions of the relevant operating systemengineflutter/engine related. See also e: labels.f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.platform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions