Wrapping a TextField with Semantics.identifier doesn't work on the Web #155323
Description
Steps to reproduce
Wrapping TextField widget with the Semantics widget (and setting Semantics.identifier on it) does not work on the Web.
- It works fine on Android and iOS.
- It works fine when wrapping, e.g. a
TextButton, not aTextField
Expected results
The semantics identifier is present, i.e. the following HTML exists:
<flt-semantics id="flt-semantic-node-25" flt-semantics-identifier="text_field">
<input type="text" ... />
</flt-semantics>Actual results
The semantics identifier is not present.
Code sample
Code sample
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Semantics(
identifier: 'text_field',
child: const TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
),
Semantics(
identifier: 'text_button',
child: TextButton(
style: ButtonStyle(
foregroundColor: WidgetStateProperty.all<Color>(Colors.blue),
),
onPressed: () {},
child: const Text('TextButton'),
),
),
],
),
),
);
}
}In this sample, here's the HTML that gets created for the subtree starting at Semantics wrapping the TextButton with Text widget:
<flt-semantics
id="flt-semantic-node-26"
flt-semantics-identifier="text_button"
style="position: absolute; overflow: visible; width: 92.7578px; height: 32px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 499.621, 464); pointer-events: none; z-index: 2;"
>
<flt-semantics-container style="position: absolute; pointer-events: none; top: 0px; left: 0px;">
<flt-semantics
id="flt-semantic-node-27"
role="button"
tabindex="0"
flt-tappable=""
style="position: absolute; overflow: visible; width: 92.7578px; height: 32px; top: 0px; left: 0px; pointer-events: all;"
>
TextButton
</flt-semantics>
</flt-semantics-container>
</flt-semantics>;And here is the HTML that gets created for the subtree starting at Semantics wrapping the TextField:
<flt-semantics
id="flt-semantic-node-25"
style="position: absolute; overflow: visible; width: 1092px; height: 48px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 416); pointer-events: all; z-index: 1;"
>
<input
type="text"
spellcheck="false"
autocorrect="on"
autocomplete="on"
data-semantics-role="text-field"
placeholder="Enter a search term"
aria-label="Enter a search term"
style="position: absolute; top: 0px; left: 0px; width: 1092px; height: 48px;"
/>
</flt-semantics>;Note
Actually, the input above when "copied as element" from Chrome DevTools is missing the /, i.e. it's <input ...>, not `<input .../> - it's weird.
Screenshots or Video
Screenshots / Video demonstration
Logs
n/a
Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.1, on macOS 14.6.1 23G93 darwin-x64, locale
en-CO)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✗] Cannot determine if IntelliJ is installed
✗ Directory listing failed
[✓] VS Code (version 1.86.1)
[✓] Connected device (2 available)
[✓] Network resources
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listEntering text in a text field or keyboard related problemsFound to occur in 3.24Found to occur in 3.26Found to occur in 3.27The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Text Input teamTriaged by Text Input team