On-web keyboard incorrectly rendering action button #100708
Description
Issue Description
The TextField Widget has a textInputAction field that lets the native operating system know how to render the action button and handle the logic associated with that button. When running on a device / simulator, the action key is rendered correctly, but on web it is not.
On web, text fields need to have a enterkeyhint property as explained here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint
Steps to Reproduce
-
Create a new flutter app
-
Add a TextField Widget
-
Set the textInputAction to TextInputAction.send
-
Set the keyboardType to TextInputType.text
-
Run the app on iOS web
-
Click on text field
Output, Code, and Logs
Output
Device results:
iOS Web results:
Code
The following is a simple app with a TextField
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 MaterialApp(
title: 'Flutter Chat Bug',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Scaffold(
body: Padding(
padding: EdgeInsets.all(50),
child: Center(
child: TextField(
cursorColor: Colors.blue,
textInputAction: TextInputAction.send,
keyboardType: TextInputType.text,
decoration: InputDecoration.collapsed(
hintText: 'Click me to enter text',
border: UnderlineInputBorder(),
),
),
),
),
),
);
}
}Logs
Analyzing chat_bug...
No issues found! (ran in 2.7s)
[✓] Flutter (Channel master, 2.13.0-0.0.pre.76, on macOS 12.2.1 21D62 darwin-x64, locale en-US)
• Flutter version 2.13.0-0.0.pre.76 at /Users/jacobburtenshaw/fvm/versions/master
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 11deb156c2 (10 days ago), 2022-03-14 10:47:56 -0400
• Engine revision 25acd778c9
• Dart version 2.17.0 (build 2.17.0-192.0.dev)
• DevTools version 2.11.4
[✗] Android toolchain - develop for Android devices
✗ 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/macos#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.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[!] 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/macos#android-setup for detailed instructions).
[✓] VS Code (version 1.65.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.36.0
[✓] Connected device (3 available)
• iPhone 13 (mobile) • C7BBFF8E-24F0-43B6-9065-2C9CC8E41F24 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
• macOS (desktop) • macos • darwin-x64 • macOS 12.2.1 21D62 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 99.0.4844.83
[✓] HTTP Host Availability
• All required HTTP hosts are available