Repository navigation
Flutter form has issues with TextFormField getting focus when voiceover is on #120894
Description
Please refer to the code at https://github.com/mfdcoder/flutter-form-voiceover
Steps to reproduce
- Switch on Voiceover
- Using Ctl + Option + Right arrow navigate to the TextFormField
- Continue navigating to 2nd, 3rd and 4th TextFormField
- Observe that voice over announces that "You are in a text field. To enter text in this field type".
- The input that has focus often does not accept what the user is typing
- The result is not consistent. The TextFormFields randomly get/don't get focus
The same can be reproduced on the flutter gallery demo app
https://gallery.flutter.dev/#/demo/text-field
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.0, on macOS 12.5 21G72 darwin-x64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.75.1)
[✓] Connected device (5 available)
[✓] HTTP Host Availability
Activity
darshankawar commentedon Feb 17, 2023
Thanks for the detailed report @mfdcoder
Is the accessibility behavior only occuring on web ? Can you also check the same on mobile platforms (Android or iOS) and see if you still get same behavior or expected results ? That way we can narrow down to platform-specific behavior.
mfdcoder commentedon Feb 20, 2023
The behaviour is specific to web. Working as expected on iOS and Android
huycozy commentedon Feb 20, 2023
I can reproduce this issue on the latest
stableandmasterchannels with provided sample code. When usingCtl + Option + Right arrowto navigate to the nextTextFormFields, the cursor won't focus on the field sometimes.But it seems to be related to focus traversal rather than TextFormField (see #118723). In case using combined keys to navigate between TextFormFields and it doesn't get focus, try going outside the Web and coming back, the focus ring will appear and the TextFormField is also focused.
Screen.Recording.2023-02-20.at.11.32.30.mov
Please try this test and confirm if you see the same behavior.
mfdcoder commentedon Feb 21, 2023
Yes- It works when try going outside the Web and coming back. But we need a solution in which user does not have to go out of the webpage
darshankawar commentedon Feb 21, 2023
Thanks for the update. Since this is replicable based on the verification done here, would be good to get web team's thoughts on the expected behavior.
stable, master flutter doctor -v
volodymyrparanytsia commentedon Apr 18, 2024
I have the same issue on the most recent version of Flutter.
The code I have issue with:
import 'package:flutter/material.dart';void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@OverRide
State createState() => _MyAppState();
}
class _MyAppState extends State {
// This variable will store the text entered in the text field
String _textFieldValue = "";
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text Field and Button'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: InputDecoration(
hintText: "Enter some text",
),
onChanged: (value) {
// Update the state variable with the entered text
setState(() {
print('TextField value -> $value');
_textFieldValue = value;
});
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Handle button press here (e.g., print the text)
print("The entered text is: $_textFieldValue");
},
child: Text('Submit'),
),
],
),
),
),
);
}
}
flutter doctor -v
[✓] Flutter (Channel stable, 3.19.4, on macOS 14.4.1 23E224 darwin-x64, locale en-GB)
• Flutter version 3.19.4 on channel stable at /Users/vladimir.paranitsa/program_files/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 68bfaea (4 weeks ago), 2024-03-20 15:36:31 -0700
• Engine revision a5c24f5
• Dart version 3.3.2
• DevTools version 2.31.1
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/vladimir.paranitsa/Library/Android/sdk
• Platform android-34, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15E204a
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.1)
• 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 17.0.7+0-17.0.7b1000.6-10550314)
[✓] VS Code (version 1.88.1)
• VS Code at /Users/vladimir.paranitsa/program_files/Visual Studio Code.app/Contents
• Flutter extension version 3.86.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 14.4.1 23E224 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.124
[✓] Network resources
• All expected network resources are available.
• No issues found!
I checked on next devices:
Macbook 14.4.1 (23E224) Chrome(123.0.6312.123) and Safari(17.4.1) - can't enter anything from keyboard
iPhone X(16.7) Chrome and Safari - VoiceOver pronounce letters I am trying to add and even read the result but the field itself empty
Pixel 3a Chrome - TalkBack read letters trying to add, but the field itself is empty
volodymyrparanytsia commentedon Apr 19, 2024
UPD: I was checking issue locally and when I run build using this command:
I see that there is an accessibility node which accept value filled in the field, however the textfield itself does not contain value. Looks like there is some issues with connection between accessibility node and the Text Field node.
[web] Skip non-focusable containers in Focusable.focusAsRouteDefault (f…
[web] Skip non-focusable containers in Focusable.focusAsRouteDefault (f…