[iOS Web] TextField does not advance to next input field via up/down arrow #96199
Description
Steps to Reproduce
- Execute
flutter build webon the code sample - Open the web page from a browser on an Apple mobile device
- Enter some digits in Input 1 field
- 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
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<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _formKey = GlobalKey<FormState>();
@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: <Widget>[
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!
