TextFormField with TextInputType.phone opens the special characters keyboard at first #55448

kongo2002 · 2020-04-23T09:24:16Z

When I am using a TextFormField with the keyboardType set to TextInputType.phone on iOS I get the the special character keyboard (for #, * and +) first but not the numeric keyboard.

Steps to Reproduce

use a TextFormField(keyboardType: TextInputType.phone)
using iOS, focus the input field

Expected results:

the numeric keyboard should be displayed first

Actual results:

initially the special character keyboard is shown
I have to tap the numbers (123) button to get to the number keyboard

flutter doctor -v

[✓] Flutter (Channel beta, v1.17.0-3.2.pre, on Mac OS X 10.15.4 19E287, locale en-DE)
    • Flutter version 1.17.0-3.2.pre at /Users/.../programs/flutter
    • Framework revision 2a7bc389f2 (30 hours ago), 2020-04-21 20:34:20 -0700
    • Engine revision 4c8c31f591
    • Dart version 2.8.0 (build 2.8.0-dev.20.10)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/.../Library/Android/sdk
    • Platform android-29, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4.1, Build version 11E503a
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] IntelliJ IDEA Community Edition (version 2019.3.4)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 45.1.2
    • Dart plugin version 193.6911.31

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

[✓] Connected device (1 available)
    • iPhone 11 Pro Max • 4DC3B729-9167-4998-80F5-B1BD12762B68 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-4 (simulator)

• No issues found!

It is the same behavior when I am using the latest beta or stable channel as well.

Cheers,
Gregor

The text was updated successfully, but these errors were encountered:

TahaTesser · 2020-04-23T10:20:01Z

Hi @kongo2002
Tried to reproduce on real device and iOS but it is working as intended on latest beta and dev

import 'package:flutter/material.dart';

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

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

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState 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.
  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: 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.
            TextFormField(
              autofocus: true,
            ),
            // The second text field is focused on when a user taps the
            // FloatingActionButton.
            TextFormField(
                focusNode: myFocusNode, keyboardType: TextInputType.phone),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // When the button is pressed,
        // give focus to the text field using myFocusNode.
        onPressed: () => myFocusNode.requestFocus(),
        tooltip: 'Focus Second Text Field',
        child: Icon(Icons.edit),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel beta, v1.17.0-3.2.pre, on Mac OS X 10.15.4 19E287, locale
    en-GB)
    • Flutter version 1.17.0-3.2.pre at /Users/taha/Code/flutter_beta
    • Framework revision 2a7bc389f2 (31 hours ago), 2020-04-21 20:34:20 -0700
    • Engine revision 4c8c31f591
    • Dart version 2.8.0 (build 2.8.0-dev.20.10)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/taha/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_212-release-1586-b4-5784211)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4.1, Build version 11E503a
    • CocoaPods version 1.9.1
[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
[✓] VS Code (version 1.44.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1
 
[✓] Connected device (4 available)            
    • SM M305F   • 32003c30dc19668f                     • android-arm64  •
      Android 10 (API 29)
    • iPhone 11  • 41EB2A85-7EB4-4FD2-8978-FBBE2A681D74 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-13-4 (simulator)
    • Chrome     • chrome                               • web-javascript •
      Google Chrome 81.0.4044.113
    • Web Server • web-server                           • web-javascript •
      Flutter Tools
• No issues found!

Also, to better address the issue, would be helpful
if you could post a minimal code sample to reproduce the problem
Thank you

kongo2002 · 2020-04-23T15:22:08Z

@TahaTesser , thanks for having a quick look already!

Finding a minimal reproduction wasn't that easy but I managed based on your example. The change is rather small but strange at the same time (at least to me): I can reproduce with your exact example just with the following added to the first TextFormField: textCapitalization: TextCapitalization.sentences.

full code

import 'package:flutter/material.dart';

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

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

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState 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.
  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: 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.
            TextFormField(
              autofocus: true,
              textCapitalization: TextCapitalization.sentences,
            ),
            // The second text field is focused on when a user taps the
            // FloatingActionButton.
            TextFormField(
                focusNode: myFocusNode, keyboardType: TextInputType.phone),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // When the button is pressed,
        // give focus to the text field using myFocusNode.
        onPressed: () => myFocusNode.requestFocus(),
        tooltip: 'Focus Second Text Field',
        child: Icon(Icons.edit),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

goderbauer · 2020-04-30T17:03:57Z

/cc @justinmc

justinmc · 2020-04-30T18:35:25Z

I was able to reproduce this as specified in #55448 (comment). I did have to completely kill and restart the app between adding that capitalization line in order to get the bug to appear. Really strange!

Looking at where the engine sets the phone keyboard, there's nothing special there about special characters mode. It seems like using the capital keyboard in the first field tries to keep "capitalization" mode in the second field, which in the case of the phone keyboard is the special characters mode.

pedromassangocode · 2020-12-18T13:07:01Z

Still reproducible on latest master. I had to restart the app as mentioned in #55448 (comment) to reproduce the issue.

flutter doctor -v

[✓] Flutter (Channel master, 1.26.0-2.0.pre.82, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.26.0-2.0.pre.82 at /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision b84d8ee2df (6 hours ago), 2020-12-18 11:59:01 +0530
    • Engine revision fd6b409f95
    • Dart version 2.12.0 (build 2.12.0-157.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • 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.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    ! 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

[✓] 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)

[✓] IntelliJ IDEA Community Edition (version 2020.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 52.0.5
    • Dart plugin version 203.5981.152

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

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

! Doctor found issues in 1 category.
Process finished with exit code 0

darshankawar · 2022-11-16T12:05:53Z

Using the code sample provided here and running it on latest versions, the issue is not replicable anymore. Tried by hot restarting and killing the app, but the special char keyboard is not shown anymore.

RPReplay-Final1668600212.MP4

Closing as fixed.

stable, master flutter doctor -v

[✓] Flutter (Channel stable, 3.3.8, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.3.8 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 52b3dc25f6 (25 hours ago), 2022-11-09 12:09:26 +0800
    • Engine revision 857bd6b74c
    • Dart version 2.18.4
    • DevTools version 2.15.0

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.6.0-3.0.pre.18, on macOS 12.2.1 21D62 darwin-x64,
    locale en-GB)
    • Flutter version 3.6.0-3.0.pre.18 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1aeb1721ca (2 hours ago), 2022-11-14 21:12:25 -0500
    • Engine revision 78ae241400
    • Dart version 2.19.0 (build 2.19.0-398.0.dev)
    • DevTools version 2.19.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

github-actions · 2022-11-30T13:09:11Z

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.

TahaTesser added in triage Presently being triaged by the triage team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds labels Apr 23, 2020

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 23, 2020

TahaTesser changed the title ~~TextFormField with TextInputType.phone opens the special characters keyboard first~~ TextFormField with TextInputType.phone opens the special characters keyboard at first run Apr 24, 2020

TahaTesser changed the title ~~TextFormField with TextInputType.phone opens the special characters keyboard at first run~~ TextFormField with TextInputType.phone opens the special characters keyboard at first Apr 24, 2020

TahaTesser added found in release: 1.17 Found to occur in 1.17 found in release: 1.12 Found to occur in 1.12 found in release: 1.18 Occurs in 1.18 labels Apr 24, 2020

goderbauer added the engine flutter/engine repository. See also e: labels. label Apr 30, 2020

kf6gpe added P2 Important issues not at the top of the work list and removed P2 Important issues not at the top of the work list labels Dec 10, 2020

pedromassangocode added found in release: 1.26 Found to occur in 1.26 and removed found in release: 1.12 Found to occur in 1.12 found in release: 1.17 Found to occur in 1.17 found in release: 1.18 Occurs in 1.18 labels Dec 18, 2020

darshankawar closed this as completed Nov 16, 2022

darshankawar added the r: fixed Issue is closed as already fixed in a newer version label Nov 16, 2022

github-actions bot locked as resolved and limited conversation to collaborators Nov 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TextFormField with TextInputType.phone opens the special characters keyboard at first #55448

TextFormField with TextInputType.phone opens the special characters keyboard at first #55448

kongo2002 commented Apr 23, 2020

TahaTesser commented Apr 23, 2020 •

edited

Loading

kongo2002 commented Apr 23, 2020

goderbauer commented Apr 30, 2020

justinmc commented Apr 30, 2020

pedromassangocode commented Dec 18, 2020 •

edited

Loading

darshankawar commented Nov 16, 2022

github-actions bot commented Nov 30, 2022

TextFormField with TextInputType.phone opens the special characters keyboard at first #55448

TextFormField with TextInputType.phone opens the special characters keyboard at first #55448

Comments

kongo2002 commented Apr 23, 2020

Steps to Reproduce

TahaTesser commented Apr 23, 2020 • edited Loading

kongo2002 commented Apr 23, 2020

goderbauer commented Apr 30, 2020

justinmc commented Apr 30, 2020

pedromassangocode commented Dec 18, 2020 • edited Loading

darshankawar commented Nov 16, 2022

github-actions bot commented Nov 30, 2022

TahaTesser commented Apr 23, 2020 •

edited

Loading

pedromassangocode commented Dec 18, 2020 •

edited

Loading