DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix CapsLock keyevent (#21584)

Browse Source 
* Fix metaState for Key events for lock modifiers
This commit is contained in:
Ferhat 2020-10-05 12:49:32 -07:00 committed by GitHub
parent 33515242ed
commit 284ef2217d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
e2etests/web/regular_integration_tests/test_driver/text_editing_integration.dart
View File

@ -143,6 +143,57 @@ void main() {
expect(input2.value, 'Text2');
});
testWidgets('Jump between TextFormFields with tab key after CapsLock is'
'activated',
(WidgetTester tester) async {
app.main();
await tester.pumpAndSettle();
// TODO(nurhan): https://github.com/flutter/flutter/issues/51885
SystemChannels.textInput.setMockMethodCallHandler(null);
// Focus on a TextFormField.
final Finder finder = find.byKey(const Key('input'));
expect(finder, findsOneWidget);
await tester.tap(find.byKey(const Key('input')));
// A native input element will be appended to the DOM.
final List<Node> nodeList = document.getElementsByTagName('input');
expect(nodeList.length, equals(1));
final InputElement input =
document.getElementsByTagName('input')[0] as InputElement;
// Press and release CapsLock.
dispatchKeyboardEvent(input, 'keydown', <String, dynamic>{
'key': 'CapsLock',
'code': 'CapsLock',
'bubbles': true,
'cancelable': true,
});
dispatchKeyboardEvent(input, 'keyup', <String, dynamic>{
'key': 'CapsLock',
'code': 'CapsLock',
'bubbles': true,
'cancelable': true,
});
// Press Tab. The focus should move to the next TextFormField.
dispatchKeyboardEvent(input, 'keydown', <String, dynamic>{
'key': 'Tab',
'code': 'Tab',
'bubbles': true,
'cancelable': true,
});
await tester.pumpAndSettle();
// A native input element for the next TextField should be attached to the
// DOM.
final InputElement input2 =
document.getElementsByTagName('input')[0] as InputElement;
expect(input2.value, 'Text2');
});
testWidgets('Read-only fields work', (WidgetTester tester) async {
const String text = 'Lorem ipsum dolor sit amet';
app.main();

28
lib/web_ui/lib/src/engine/keyboard.dart
View File

@ -116,6 +116,17 @@ class Keyboard {
}
_lastMetaState = _getMetaState(event);
if (event.type == 'keydown') {
// For lock modifiers _getMetaState won't report a metaState at keydown.
// See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState.
if (event.key == 'CapsLock') {
_lastMetaState |= modifierCapsLock;
} else if (event.code == 'NumLock') {
_lastMetaState |= modifierNumLock;
} else if (event.key == 'ScrollLock') {
_lastMetaState |= modifierScrollLock;
}
}
final Map<String, dynamic> eventData = <String, dynamic>{
'type': event.type,
'keymap': 'web',
@ -132,7 +143,6 @@ class Keyboard {
switch (event.key) {
case 'Tab':
return true;
default:
return false;
}
@ -157,6 +167,9 @@ const int _modifierShift = 0x01;
const int _modifierAlt = 0x02;
const int _modifierControl = 0x04;
const int _modifierMeta = 0x08;
const int modifierNumLock = 0x10;
const int modifierCapsLock = 0x20;
const int modifierScrollLock = 0x40;
/// Creates a bitmask representing the meta state of the [event].
int _getMetaState(html.KeyboardEvent event) {
@ -173,8 +186,17 @@ int _getMetaState(html.KeyboardEvent event) {
if (event.getModifierState('Meta')) {
metaState |= _modifierMeta;
}
// TODO: Re-enable lock key modifiers once there is support on Flutter
// Framework. https://github.com/flutter/flutter/issues/46718
// See https://github.com/flutter/flutter/issues/66601 for why we don't
// set the ones below based on persistent state.
// if (event.getModifierState("CapsLock")) {
// metaState |= modifierCapsLock;
// }
// if (event.getModifierState("NumLock")) {
// metaState |= modifierNumLock;
// }
// if (event.getModifierState("ScrollLock")) {
// metaState |= modifierScrollLock;
// }
return metaState;
}