Webview does not take the keyboard focus about flutter HOT 12 OPEN

FYI: My current workaround is that I put the AppBar in a ExcludeFocus widget, since there is that (IMHO annoying) PreferredSizeWidget you need to write a lot of boilerplate of it:

class UnfocusableAppBar extends StatelessWidget implements PreferredSizeWidget {
  final AppBar _appBar;
  UnfocusableAppBar({
    super.key,
    Widget? leading,
    bool automaticallyImplyLeading = true,
    Widget? title,
    List<Widget>? actions,
    Widget? flexibleSpace,
    PreferredSizeWidget? bottom,
    double? elevation,
    double? scrolledUnderElevation,
    ScrollNotificationPredicate notificationPredicate = defaultScrollNotificationPredicate,
    Color? shadowColor,
    Color? surfaceTintColor,
    ShapeBorder? shape,
    Color? backgroundColor,
    Color? foregroundColor,
    IconThemeData? iconTheme,
    IconThemeData? actionsIconTheme,
    bool primary = true,
    bool? centerTitle,
    bool excludeHeaderSemantics = false,
    double? titleSpacing,
    double toolbarOpacity = 1.0,
    double bottomOpacity = 1.0,
    double? toolbarHeight,
    double? leadingWidth,
    TextStyle? toolbarTextStyle,
    TextStyle? titleTextStyle,
  }): _appBar = AppBar(
    leading: leading,
    automaticallyImplyLeading: automaticallyImplyLeading,
    title: title,
    actions: actions,
    flexibleSpace: flexibleSpace,
    bottom: bottom,
    elevation: elevation,
    scrolledUnderElevation: scrolledUnderElevation,
    notificationPredicate: notificationPredicate,
    shadowColor: shadowColor,
    surfaceTintColor: surfaceTintColor,
    shape: shape,
    backgroundColor: backgroundColor,
    foregroundColor: foregroundColor,
    iconTheme: iconTheme,
    actionsIconTheme: actionsIconTheme,
    primary: primary,
    centerTitle: centerTitle,
    excludeHeaderSemantics: excludeHeaderSemantics,
    titleSpacing: titleSpacing,
    toolbarOpacity: toolbarOpacity,
    bottomOpacity: bottomOpacity,
    toolbarHeight: toolbarHeight,
    leadingWidth: leadingWidth,
    toolbarTextStyle: toolbarTextStyle,
    titleTextStyle: titleTextStyle,
  );

  @override
  Widget build(BuildContext context) => ExcludeFocus(child: _appBar);

  @override
  Size get preferredSize => _appBar.preferredSize;
}

Please be aware that this breaks the usage of the app bar with the keyboard and accessibility. For my use case this seems to be acceptable.

from flutter.

Hi @rekire
I'm unsure what the actual result is. Do you mean the drawer is auto-open while entering text on the field? If so, I couldn't reproduce it.

Open the drawer with a bluetooth keyboard and close it

For this step, do you use keyboard or tap on drawer button?

from flutter.

I want to type text into the WebView without accidentally executing any other actions. When you used the native UI and use then the WebView the AppBar has the keyboard focus, but you can type text into the input fields. Since the letters "h", "e", "l" and "o" are not handled the AppBar the WebView can consume it, but enter and space is consumed by the other widgets. If the key pressed would not be handled by the WebView it would be less confusing for the customer

It does not really matter how you opened it first tap or enter/space works both

from flutter.

Since the letters "h", "e", "l" and "o" are not handled the AppBar the WebView can consume it, but enter and space is consumed by the other widgets.

Do you mean the issue is the Drawer is auto opened when you enter Enter or Space key? I tried with these keys but the input field on WebView consumes them as expected, please see deme below. The Drawer is only opened when I navigate to DrawerButton by pressing Tab key (a way to navigate out the WebView).

from flutter.

Your video shows the expected behavior, which I do not have. I got this report from multiple devices on Android and iOS (also for multiple apps). When I see the highlighted circle the action is always executed by pressing space and enter. However the fact that it is highlighted is also an indicator of a wrong keyboard focus.

Out of curiosity which device and android version did you use for testing? That is not the emulator right? If I remember correctly then those strange keyboard focus bugs do not happen there. I opened in the past another bug for that, but it was closed since there was a simple workaround.

from flutter.

I'm checking this on a physical Android 14 device (Pixel 7) with a Bluetooth keyboard similar to what you mentioned above. Does that mean the issue only occurs on an emulator?

I opened in the past another bug for that, but it was closed since there was a simple workaround.

Could you link it here? I found some issues that may be related to this that you can check if one of them assembles your case: #102505, #130652

Also, what is your current webview package version? I'm using the latest version: webview_flutter: ^4.7.0.

from flutter.

I have that wrong behavior just on real devices, I didn't test it on emulators. I used the same webview version for the test case and the video above. However the production apps are using an older versions of the webview.

I tried it now again and it behaved like in your video. But I found a variation which works now again:

• Start the app
• Click into the text area
• Press tab once
• Type "hello world"

The visual text focus is after pressing tab on the hamburger menu and still the text area. "hello" will be typed, but the space is consumed by the button in the app bar.

The bug I am referring is #135811 Oh wow you provided me the workaround 😁

I just checked it I am also affected by #102505 I just didn't noticed it before. I'll check if the workaround mentioned here works for me.

from flutter.

The visual text focus is after pressing tab on the hamburger menu and still the text area. "hello" will be typed, but the space is consumed by the button in the app bar.

Strangely, I couldn't reproduce this. Once I focus on the text area on web, it can consume space or enter key as desired. The app only triggers buttons on app bar when I tab out of webview

The bug I am referring is #135811 Oh wow you provided me the workaround 😁

Glad it helps :-). But that issue is about on focus of framework widget (button) rather than platformview relates.

If you found that #102505 can assemble this case, I would recommend centralizing on that one. Please also share your case there.

from flutter.

I almost cannot believe (but of course I do not say you lie) that you are not affected by this bug, since I got this issue from multiple people and I can reproduce it very well. Might be it is related to keyboard layouts? I'm using the German QWERTZ layout? (Just because I am running out of ideas)

from flutter.

I'm using US Keyboard Layout (Keychron K1). I looked at German keyboard layout, and it seems there are no differences between Space and Enter keys on these two layouts.

I think the difference between my and your results may come from steps that we haven't found yet as you said it works for you by following steps above.

I have made a pure platform view sample here, could you check it on your end? repro-147844-keyboard-focus . Instead of using webview plugin, I created Android native layout with EditText inside; Flutter's widget components (AppBar and Drawer) wrap platform view as your original example. Through this test, we may narrow the scope of the bug.

from flutter.

I checked your sample, but out of my view it does not make sense. That sample has just a TextView which is just plain text. I'll fork it and change it so that there is at least an EditText widget so that something can be entered. I will also add a scaffold and AppBar to match those parts.

Edit: I just noticed that I checked the wrong branch. Anyway I forked it here, however the result is the same as in your code: it works as expected.

Edit 2: In my sample app I can still reproduce my bug. What I notice is when the flutter widgets should loose the focus (that circle) that this does not happen when I focus the webview. However in your code (and the fork of your code) it directly loose the focus as expected. I'll try to check what's happen when I add the webview without the plugin.

Edit 3: Well it works also as expected with the "self made" webview. You can check my code here. I'm running out of ideas.

Edit 4: The workaround mentioned above works in most cases well. I still found some edge cases when I switch from the native views to the webview sometimes the focus is not correctly set, but when I tap onto the webview it "repairs" itself.

My workaround looks now like this:

Focus(
  canRequestFocus: false,
  onKeyEvent: (node, event) {
    if (event.logicalKey.isAnyOf(
      LogicalKeyboardKey.arrowDown,
      LogicalKeyboardKey.arrowRight,
      LogicalKeyboardKey.arrowUp,
      LogicalKeyboardKey.arrowLeft,
      LogicalKeyboardKey.tab,
      LogicalKeyboardKey.space,
      LogicalKeyboardKey.enter,
      LogicalKeyboardKey.numpadEnter,
    )) {
      return KeyEventResult.skipRemainingHandlers;
    }
    return KeyEventResult.ignored;
  },
  child: WebViewWidget(controller: webViewController),
)

The isAnyOf() extension can be found here: dart-lang/sdk#55115

from flutter.

Thanks for checking the pure platform example. I just checked the issue with the original sample code on iPhone 7, iOS 15.8, the issue appears now whilst it doesn't occur on my Android device as I mentioned above.

With your result on Android device and pure platform views test, marking this as a webview_flutter package issue. Thanks for your patience.

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (31 hours ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.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.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.124

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-28.0.pre.17, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-28.0.pre.17 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 972dcd7c65 (23 minutes ago), 2024-05-08 22:41:26 -0400
    • Engine revision 69f2d9610a
    • Dart version 3.5.0 (build 3.5.0-138.0.dev)
    • DevTools version 2.36.0-dev.5
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.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.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.89.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 124.0.6367.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

from flutter.