[Web] - Broken TextField in Semantics mode when using ListView and Scaffold’s AppBar on mobile browsers #154741
Description
Steps to reproduce
- Run a web app with ensureSemantics enabled on a mobile device
- Render a TextField or two in a ListView inside a Scaffold with an AppBar
- Attempt to tap on a TextField
Expected results
The mobile keyboard should come up and stay up
Actual results
The mobile keyboard comes up and closes again very quickly making it impossible to enter text.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
WidgetsFlutterBinding.ensureInitialized().ensureSemantics();
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.only(top: 40),
child: SizedBox(
width: 300,
//The ListView can be substituted for a SingleChildScrollView with a Column and the issue still persists.
child: ListView(
children: [
const TextField(
decoration: InputDecoration(
hintText: 'Prefix',
suffixIcon: Icon(Icons.abc),
),
),
const SizedBox(height: 30),
const TextField(
decoration: InputDecoration(
hintText: 'First Name',
suffixIcon: Icon(Icons.abc),
),
),
const SizedBox(height: 30),
const TextField(
decoration: InputDecoration(
hintText: 'Last Name',
suffixIcon: Icon(Icons.abc),
),
),
const SizedBox(height: 30),
FilledButton(
onPressed: () {},
child: const Text('Submit'),
),
],
),
),
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.24.1, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
• Flutter version 3.24.1 on channel stable at /Users/rona/Sites/Tools/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5874a72aa4 (2 weeks ago), 2024-08-20 16:46:00 -0500
• Engine revision c9b9d5780d
• Dart version 3.5.1
• DevTools version 2.37.2
[✗] 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/to/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 15.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15E204a
✗ Unable to get list of installed Simulator runtimes.
• CocoaPods version 1.15.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/to/macos-android-setup for detailed instructions).
[✓] VS Code (version 1.92.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.94.0
[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.6.1 23G93 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.6.1 23G93 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 128.0.6613.120
[✓] Network resources
• All expected network resources are available.Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)Entering text in a text field or keyboard related problemsonly manifests in Chrome on Androidonly manifests in Chrome on iOSonly manifests in Safari on iOSFound to occur in 3.24Found to occur in 3.25flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Web platform teamTriaged by Web platform team