Webview does not take the keyboard focus

[rekire]

Steps to reproduce

1. Create a flutter app with a Scaffold, AppBar, Drawer and/or AppBar actions and of cause a WebView as body
2. Click on an input field or textarea within the webview
3. Open the drawer with a bluetooth keyboard and close it
4. Try to type "Hello World" with a connected bluetooth keyboard

Expected results

The text field should have the value "Hello World"

Actual results

The text field has the value "Hello" and a more or less random AppBar interaction was executed like the drawer has opened or the app bar action was executed.

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse('https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea'));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // TRY THIS: Try changing the color here to a specific color (to
        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Demo'),
        actions: [
          IconButton(onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Yep you used the action')));
          }, icon: const Icon(Icons.developer_mode))
        ],
      ),
      drawer: const Drawer(
        child: Text('Demo Drawer'),
      ),
      body: WebViewWidget(controller: webViewController),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

demo.mp4

Logs

Logs

I see nothing helpful here

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] Connected device (3 available)            
[✓] Network resources

• No issues found!

Same behavior on Windows

[rekire]

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:

UnfocusableAppBar

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.

[huycozy]

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?

[rekire]

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

[huycozy]

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).

Demo

screen-20240507-142929.mp4

[rekire]

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.

[huycozy]

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.

[rekire]

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.

[huycozy]

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.

[rekire]

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)

[huycozy]

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.

[rekire]

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

[huycozy]

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 doctor -v (stable and master)

[✓] 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.