[webview_flutter] Physical keyboard: arrow keys not working #102505
Comments
|
Hi @junglerobba, Thanks for filing the issue. I am able to reproduce the issue on stable and the master channel. Pressing arrow keys using the physical keyboard does not move the cursor. The issue is reproducible on both IOS and Android. Reproduces even with Hybrid composition on Android. code sampleimport 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
// Enable virtual display.
if (Platform.isAndroid) WebView.platform = AndroidWebView();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: WebView(
initialUrl: 'https://google.com/',
),
);
}
}
flutter doctor -v (mac) |
|
cc @cyanglaz |
|
On iOS: Screen.Recording.2022-05-18.at.10.35.32.AM.mov |
|
I create a quick prototype to demo a potential fix ( flutter/engine#33458). I'm not familiar with how the keyboard keys are handled in other cases so this fix might missing corner cases. There should be a more elegant solution. cc @hellohuanlin This could be related to the focus tree work you are current working on. |
|
cc @dkwingsmt |
|
@cyanglaz Thanks for the analysis! Although, the current code does take the |
|
@gspencergoog Have we ever tested keyboard on platform views? It seems to me that no platform views contain any focus at all. They can't be focused, and there are no ways to delegate key events to their native component. |
|
No, I don't think we've ever done much with platform views and keyboard events. |
Sounds like if PlatformView participants in the focus tree, this should be straightforward to wire up? @hellohuanlin Is recently working on adding PlatformViews to the focus three. #34187. Meanwhile, Android PlatformView already participants in the Focus Tree. So Android PlatformView is unblocked. |
|
Kind of. There are three remaining points as far as I can think of:
I saw @hellohuanlin 's work (flutter/engine#33093 if I didn't misunderstand). It seems that they had to add code specially for text input. If that's required we'll also need to figure out a way to incorporate text input and keyboard. |
|
@dkwingsmt oh that engine PR is not complete change yet. A missing part is to detect platform view focus and send channel message to the framework. |
|
Yeah I'm aware. I'm just curious what it takes on the engine side to make it work. Let me know your progress! |
|
My understanding is that, in my change that allows platform view to participate in the focus tree, when the platform view gets focused, then framework will unfocus the previously focused widget (seems to be the navigation bar in this case). So my guess is that after my changes land, this problem will just get resolved automatically (though i'm not 100% sure since I'm still new to this code). |
|
@tilemoon can you update to the latest version and see if it's fixed? |
|
@tilemoon Gotcha. Looks like this issue turned out not related to my other fix related to platform view focus then. cc: @dkwingsmt |
|
I managed to get it working! #74044 (comment) |
|
Any update for Android? |
|
any updates? |
From your workaround, it's simply overriding FlutterViewController's I'm not familiar with this part, but from git history, @gspencergoog probably has some context. |
|
We managed to come up with a work-around that works on both Android (including Chromebook) and iOS. The solution does not require editing platform-specific code (like was done in #74044 (comment)). Issue and solutionApparently the arrow keys from the hardware keyboard get "eaten" by Flutter and never reach the included webview. By listening to the arrow keys and instructing Flutter to return them to the platform the arrow keys function again. The work-around does this by returning
Work-around codeWe've created a new repository containing an updated code sample (the code in the first comment used on old version of webview_flutter) to demonstrate the original issue. After that, we have updated the repository with our work-around. The relevant file containing the work-around is lib/main.dart. RemarksPlease note that on Android and Chromebook it is possible in input fields to move the cursor beyond the last character. When moving one character back (using the left arrow key), the entire text becomes selected. This behaviour is different to what happens when you choose Web as a build target and open the app in (for example) Chrome. |
|
This solution (#102505 (comment)) will only work after double clicking on any of the arrows. Is there an alternative solution ? |
In our app no double clicking is required; it works as expected. |
|
I tested it on an emulator and a physical device, the behavior is the same. At the first start of the program, after clicking on the down arrow, only 1 ArrowDown RawKeyUpEvent event is generated, without RawKeyDownEvent. After that, everything is fine. |
I've just retested this and you're right. The very first event is missed unfortunately. We currently don't know a way how to work-around this. |
|
Any updates on this please? Maybe it's worth raising the priority because allowing the use of physical keyboards is part of accessibility requirements. |
|
Same issue. |
|
Might be #147844 is also affected by this issue. My issue is that when I press enter or space and another "visual focused" widgets consume the space and enter pressed on a physical (bluetooth) keyboard. I'll check if the workaround mentioned here could fix my issue too. |
|
The mentioned workaround also helped with web platform view |
Uh oh!
There was an error while loading. Please reload this page.
Steps to Reproduce
flutter runon the code sample (iOS Simulator or iPad with bluetooth keyboard)Expected results:
Cursor should move left
Actual results:
Cursor does not move
Code sample
Logs
The text was updated successfully, but these errors were encountered: