search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
166.12k stars 27.43k forks source link

[IOS] TextField does not advance to next input field if KeyboardType set to `TextInputType.number` #96199

Open Simpler1 opened 2 years ago

Simpler1 commented 2 years ago

Steps to Reproduce

  1. Execute flutter build web on the code sample
  2. Open the web page from a browser on an Apple mobile device
  3. Enter some digits in Input 1 field
  4. Notice that the "next" button (which is displayed as a down arrow) is insensitive and will not progress to the Input 2 field

Expected results: The "next" button should progress to the next input field

Actual results: Insensitive "next" button

Code sample ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { final _formKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Web on Mobile'), ), body: Center( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text( 'Build this for web and then open the web page from a mobile device. Enter some text in the Input 1 field and then notice that the "Next" button (the arrow down) does not progress to the next field.'), Form( key: _formKey, child: Column( children: [ TextFormField( textInputAction: TextInputAction.next, decoration: const InputDecoration( labelText: 'Input 1', ), keyboardType: TextInputType.number, ), TextFormField( textInputAction: TextInputAction.done, decoration: const InputDecoration( labelText: 'Input 2', ), ) ], ), ), ], ), ), ), ); } } ```
Additional Info ``` This problem/UI is specific to Apple devices, but Android has a similar problem with the "return/Go/Next" key on the keyboard itself. I have tried this on multiple mobile browsers on Apple devices including Chrome, Edge, Safari, Opera, DuckDuckGo and all have the problem. ``` ``` flutter doctor -v [√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.18363.1916], locale en-US) • Flutter version 2.8.1 at c:\user1\Personal\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 77d935af4d (3 weeks ago), 2021-12-16 08:37:33 -0800 • Engine revision 890a5fca2e • Dart version 2.15.1 [√] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at C:\Users\user1\AppData\Local\Android\sdk • Platform android-32, build-tools 32.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [√] Android Studio (version 2020.3) • Android Studio at C:\Program Files\Android\Android Studio • 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 11.0.10+0-b96-7249189) [√] VS Code (version 1.63.2) • VS Code at C:\Users\user1\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.32.0 [√] Connected device (2 available) • Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.110 • Edge (web) • edge • web-javascript • Microsoft Edge 96.0.1054.62 • No issues found! ```
maheshj01 commented 2 years ago

Hi @Simpler1,

There is a similar issue describing this case https://github.com/flutter/flutter/issues/73835, Please follow up there for further updates, Closing this issue as a duplicate.

Thank you.

Simpler1 commented 2 years ago

Hi @maheshmnj,

I think this issue should be reopened. It's similar, but not the same as issue 73835. When the keyboardType is number, there is no "return" button displayed on the keyboard and the "Done" button is active, but doesn't respond.

Is there a workaround to at least use the "Done" button to advance to the next field.?

(I've updated the code sample to use the number keypad and title to indicate that this particular issue is specific to browsers on Apple devices.)

maheshj01 commented 2 years ago

Thanks for the info reopening based on the above comment.

maheshj01 commented 2 years ago

Thanks for the info @Simpler1, I am able to reproduce the issue The arrow keys are disabled to navigate to next field on IOS while it works fine on Android.

Web

Android IOS

Mobile App

Android IOS

This issue is with TextInputType.number and works fine TextInputType.text

https://user-images.githubusercontent.com/31410839/148505226-c534f459-9a2b-4113-927f-fc31890f25d5.mov

flutter doctor -v ``` [✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-GB) • Flutter version 2.8.1 at /Users/mahesh/Documents/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 77d935af4d (3 weeks ago), 2021-12-16 08:37:33 -0800 • Engine revision 890a5fca2e • Dart version 2.15.1 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.10.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.2) • 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 11.0.8+10-b944.6916264) [✓] IntelliJ IDEA Community Edition (version 2021.2.1) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 60.1.4 • Dart plugin version 212.5080.8 [✓] VS Code (version 1.63.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.32.0 [✓] Connected device (4 available) • Redmi K20 Pro (mobile) • 192.168.1.3:5555 • android-arm64 • Android 11 (API 30) • iPhone 13 Pro (mobile) • 0FA2FB93-2A89-4FDB-8293-DF66188F1E54 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 12.1 21C52 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.110 • No issues found! ``` ``` [✓] Flutter (Channel master, 2.9.0-1.0.pre.224, on macOS 12.1 21C52 darwin-arm, locale en-GB) • Flutter version 2.9.0-1.0.pre.224 at /Users/mahesh/Documents/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision a0f8937b7c (2 days ago), 2022-01-03 04:15:18 -0500 • Engine revision 8f53bbfde0 • Dart version 2.16.0 (build 2.16.0-134.0.dev) • DevTools version 2.9.2 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.10.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.2) • 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 11.0.8+10-b944.6916264) [✓] IntelliJ IDEA Community Edition (version 2021.2.1) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 60.1.4 • Dart plugin version 212.5080.8 [✓] VS Code (version 1.63.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.32.0 [✓] Connected device (4 available) • Redmi K20 Pro (mobile) • 192.168.1.3:5555 • android-arm64 • Android 11 (API 30) • iPhone 13 Pro (mobile) • 0FA2FB93-2A89-4FDB-8293-DF66188F1E54 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 12.1 21C52 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.110 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```
yjbanov commented 2 years ago

cc @mdebbar

gabrieluca commented 2 years ago

I had the same issue, neither next or done works when TextInputType.number is selected.

macleash90 commented 1 year ago

I had the same issue, neither next or done works when TextInputType.number is selected.

Any solution to this problem yet?

manandharsudhir commented 4 months ago

Any solution to this problem yet?

jakenoble commented 4 months ago

Finding a similar issue myself with this, any news?