Repository navigation
[web] TextField duplicates KeyEvents (handles event, AND passes event on to parent) #70507
Description
Steps to Reproduce
Its seems that TextField passes all of its keys events to its parent widget, even if those events were handled by the textview as text input. This is very non-standard behavior in UI and causes input to TextFields to be also interpreted a second time as, say, short-cut keys to parent widgets. (This happens for web and Android, at least).
A cleaner design would be to:
- not pass key events (generally!) to parents if the event is interpreted by a widget
- supply a flag (
bool eatInterprettedKeyEvent = true) to TextView to enable/disable the behavior to ensure back compatibility
Example: Enter text into the TextView, the key inputs are also received by the containing FocusScope. event2 is printed indicating that event handled by the textview (including arrow keys which affect scrolling) are unhelpfully passed to parent widgets.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Padding(padding: EdgeInsets.all(20), child: test()))));
}
}
Widget test() {
return FocusScope(
onKey: (FocusNode node, RawKeyEvent event) {
print("event1: $event"); /// In not called
return true;
},
node: FocusScopeNode(),
child: FocusScope(
onKey: (FocusNode node, RawKeyEvent event) {
print("event2: $event"); /// Should not be called
return true; /// Don't pass to parent
},
node: FocusScopeNode(),
child: TextField(decoration: InputDecoration(hintText: "type..."))));
}
/home/sir/development/flutter/bin/flutter doctor --verbose
[✓] Flutter (Channel unknown, 1.22.0-12.2.pre, on Linux, locale en_US.UTF-8)
• Flutter version 1.22.0-12.2.pre at /home/sir/development/flutter
• Framework revision 2bafdc8226 (7 weeks ago), 2020-09-25 12:48:22 -0700
• Engine revision f763b5b9b9
• Dart version 2.10.0 (build 2.10.0-110.5.beta)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /home/sir/Android/Sdk
• Platform android-29, build-tools 29.0.2
• Java binary at: /home/sir/soft/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Android Studio (version 4.0)
• Android Studio at /home/sir/soft/android-studio
• Flutter plugin version 49.0.2
• Dart plugin version 193.7547
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[✓] Connected device (3 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 86.0.4240.193
• No issues found!
Process finished with exit code 0
Activity
pedromassangocode commentedon Nov 16, 2020
Hi @stuz5000
Can you please upgrade to the latest
stableand try againflutter channel stableflutter upgrade --forceflutter doctor -vIf the issue persists then please provide your
flutter doctor -v.Thank you
allComputableThings commentedon Nov 16, 2020
Following your instructions, it works for Android. But still fails for web (where I have to switch to beta).
Android:
Web:
[-]TextView duplicates KeyEvents (handles event, AND passes event on to parent)[/-][+][web] TextView duplicates KeyEvents (handles event, AND passes event on to parent)[/+]pedromassangocode commentedon Nov 17, 2020
Hi @stuz5000 isn't this the expected behavior?
If you see the docs of
FocusScopeit says:This means that it is not passing the event to its parent, but, the FocusScope widget is capturing the vents itself, does that makes sense to you?
allComputableThings commentedon Nov 18, 2020
The issue is not that FocusScope catches the event (and allows me to correctly block it from being passed to parents), its that key inputs to the TextField makes it to the FocusScope in the first place. I would think that if that someone types into a TextField and the TextField receives that input, updated its TextController and displays it, then the key event (by default) is handled and should not be passed to the parent (FocusScope or otherwise). If it is not so, the key input will be potentially interpreted again by parent widgets (e.g. generating spurious shortcuts key event for the current page, or scrolling a containing listview on cursor input in the TextView, etc...)
pedromassangocode commentedon Nov 18, 2020
Hi @stuz5000
Do you mean TextField instead of TextView in the issue's title? As far as I know there is no such widget in Flutter.
allComputableThings commentedon Dec 1, 2020
Yes -- that is correct. TextField (as in the sample code I provided)
pedromassangocode commentedon Dec 1, 2020
Hi @stuz5000
I just tested again and I cannot reproduce the issue on
stableandbetachannel.In the logs bellow, I pressed the following digits one at time sequentially (on Flutter Web): 235
Note that only the vent2 is being printed.
flutter doctor -v
2 remaining items
[-][web] TextView duplicates KeyEvents (handles event, AND passes event on to parent)[/-][+][web] TextField duplicates KeyEvents (handles event, AND passes event on to parent)[/+]exaby73 commentedon Feb 1, 2023
I cannot reproduce this issue anymore on the latest stable and master. Therefore, I am closing this issue as fixed. if you still reproduce this issue, please comment and I can reopen it. Thank you
github-actions commentedon Mar 3, 2023
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.