[web] onSubmitted of TextField is called on mobile web browsers when browser switches tabs or is sent to background #134846
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- Open the following minimal example in a mobile browser on iOS or Android. It has to be a mobile browser, the bug will not occur on any desktop browser.
https://dartpad.dev/?id=0aa31b7bddb77d64e2baf145dedec21a - Enter some text in the text field, but do not hit enter or dismiss the keyboard. There should be no text displayed below "Last submitted value".
- Either switch to another tab or send the browser app to the background.
- Switch back to the dartpad tab or open the browser app again.
Expected results
The example app should look exactly same as before the tab was switched / the browser was sent to the background.
Actual results
The onSubmitted function has been called and below the "Last submitted value:" line, the text entered in the Textfield is displayed now.
This is problematic, as the text has been submitted without the user indicating in any way that it should be. Furthermore there is no straight forward way to distinguish between onSubmitted being called because the user pressed the enter key and it being called because the user switched tabs. For example in a chat app this would cause a message to be sent when the user submits the text by pressing "send" on the virtual keyboard as well as when the user switches to another tab. The later action is likely not so much intended.
Code sample
Code sample
// Code is is also available here: https://dartpad.dev/?id=0aa31b7bddb77d64e2baf145dedec21a
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MySubmitTest(),
),
),
);
}
}
class MySubmitTest extends StatefulWidget {
@override
createState() => MySubmitTestState();
}
class MySubmitTestState extends State<MySubmitTest> {
String lastSubmittedValue = "";
@override
Widget build(BuildContext context) {
final style = Theme.of(context).textTheme.titleLarge;
return Column(children: [
Text('Last submitted value:', style: style),
Text(lastSubmittedValue, style: style),
TextField(onSubmitted: (value) {
setState(() {
// Store the last submitted value.
lastSubmittedValue = value;
});
}),
]);
}
}
Screenshots or Video
Screenshots / Video demonstration
RPReplay_Final1694820980.MP4
Logs
No response
Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.13.4, on macOS 13.3.1 22E261 darwin-arm64, locale de-DE)
• Flutter version 3.13.4 on channel stable at /Applications/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 367f9ea16b (3 days ago), 2023-09-12 23:27:53 -0500
• Engine revision 9064459a8b
• Dart version 3.1.2
• DevTools version 2.25.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/tauu/Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• ANDROID_HOME = /Users/tauu/Library/Android/sdk
• ANDROID_SDK_ROOT = /Users/tauu/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2020.3)
• 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.10+0-b96-7281165)
[✓] VS Code (version 1.82.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.72.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.3.1 22E261 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.187
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
Entering text in a text field or keyboard related problemsissue is assigned to a domain expert for further triageonly manifests in Chrome on Androidonly manifests in Safari on iOSFound to occur in 3.13Found to occur in 3.14flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Web platform team