How to request focus for the webview

[jswirbs]

Description

What you'd like to happen:

I would like to be able to request focus for the webview such that a window.focus event is triggered within it. I would like my webview to be focused on initial load and to be able to give it focus programmatically in certain cases (like when another overlaying widget closes) and it seems the only way to do this currently is via user gestures (i.e. a user clicking on the webview). My webview needs window focus in these cases as I have logic within the website I'm loading in it that depends on focus.

There is a clearFocus() method on the InAppWebViewController class, which will clear focus and trigger a window blur event. A requestFocus() method which does the opposite could be implemented similarly, using requestFocus() for android implementation and becomeFirstResponder() for ios implementation. I'm not sure if this is the best approach though or if there is a deeper issue here that should be addressed on the flutter side or something else. I forked the flutter_inappwebview repo and tested a requestFocus() impl as mentioned above, which works, but curious what the correct solution is for this problem.

Alternatives you've considered:

I've tried using flutter focus, and while platform views participate in the flutter focus tree, there is no way to set focus or otherwise interact with the view's focus node (as is the case with other focusable widgets). And if I were to wrap my webview widget in a focus node and control focus at that level, it would not propagate down to the webview and trigger a window focus event, as there is no connection there.

I've tried faking a click on the webview via gestures without any luck (maybe I'm missing something there, but regardless this is still a hack).

The javascript code within the website cannot give itself focus or do anything focus related while the window does not have focus.

[github-actions[bot]]

👋 @jswirbs

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[jswirbs]

This issue/question has been brought up before, for reference, but with no follow up.

https://github.com/pichillilorenzo/flutter_inappwebview/issues/744

[yamaha252]

Same here. Just needed webview to be in focus after initialisation to have tv remote d-pad navigation available.

[pichillilorenzo]

Probably using those methods on native side should be ok. I will take a look at this as soon as possible, thanks.

[jlcool]

Probably using those methods on native side should be ok. I will take a look at this as soon as possible, thanks.

Have there been any updates？

[daviddt]

Would love to have this implement too

[yamaha252]

I've tested the implementation as @jswirbs suggested.

requestFocus() for android implementation and becomeFirstResponder() for ios

It works fine as expected

[Antc1993]

Hello, is there any solution to this problem?

[h3nr1ke]

Hey all

just to comment that I found a "not so elegant" workaround to get the focus working for android devices

Stack(
  children: [
    // ADD A TEXT FIELD WITH TRANSPARENT COLOR FOR THE VISIBLE ITEMS
    // THIS SHOULD BE ADDED ONLY FOR ANDROID APPs IF YOU IMPLEMENTED THE 
    // REQUESTFOCUS FUNCTION AVAILABLE HERE
    // https://github.com/pichillilorenzo/flutter_inappwebview/pull/2168
    Platform.isAndroid ? 
      const TextField(
        autofocus: true,
        decoration: InputDecoration(
          hintText: '',
          hintStyle: TextStyle(color: Colors.transparent),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
        ),
        cursorColor: Colors.transparent,
        style: TextStyle(color: Colors.transparent),
      )
      : const SizedBox.shrink(),
    InAppWebView(
      key: webViewKey,
      initialUrlRequest: URLRequest(
        headers: initialHeaders,
        url: WebUri(widget.loadingUrl),
      ),
      initialSettings: configs.getOptions(),

      onLoadStop: (controller, url) async {
        // this method is still not in the main code
        // please take a look here
        // https://github.com/pichillilorenzo/flutter_inappwebview/pull/2168
        await webViewController.requestFocus();

        // request focus for text element inside the page
        // in this example, search-box-field is the id of a input element
        // It was added a timeout just in case, but you can try with or without 
        // to see what happen in your app
        await webViewController.evaluateJavascript(
          source:'''
            setTimeout(()=>{
              console.log("timeout do search-box-field focus"); 
              document.getElementById("search-box-field").focus();},
              200
            );
          ''',
        );
      },
    ),
  ]
);

The main idea is to get the focus in the widget and open the keyboard

Once the keyboard is visible we asked the focus to the webview, and it works

the tradeoff is that the keyboard opens very fast so it looks like a delay, but it works for Android devices.

Please take in consideration that this is using the new requestFocus implementation that is not yet in the main branch

please take a look here

https://github.com/pichillilorenzo/flutter_inappwebview/pull/2168