WKWebView and input.focus()

1

Since moving from UIWebView to WKWebView, opening the keyboard with input1.focus() no longer works.

The config.xml currently has <preference name="KeyboardDisplayRequiresUserAction" value="false" />. I can’t locate a WKWebView version of this preference setting. Has anyone found a solution for this?

2

This plugin could help:

3

Thanks George. I saw that option but did not use it because it has been deprecated. Any way to update the WKWebView plugin since the said the focus issue has already been addressed in the latest version?

4

While it’s deprecated, it also says this:

“And if your issue still exists after the upgrade, open an issue on the main wkwebview cordova repo: https://github.com/apache/cordova-plugin-wkwebview-engine/issues.”

Since we’re using the latest Cordova, it should be using the latest wkwebview.

5

Thanks. I’ve been through the repo there. It doesn’t look like it’s going to be addressed in WKWebView from what they just posted there:

“Thank you for your contribution, but regret to say we cannot accept the PR. See below for why.
in order to get similar functionality on WKWebView requires swizzling private methods
It is against Apple’s rules to use private methods and might lead to apps being rejected, so we will not add any code to Cordova itself that makes use of them.
It should be possible for someone to write a 3rd party plugin that provides this behaviour.”

Just find it strange that they left ‘focus’ out of the updates. So I guess I’ll give the ‘inputfocusfix’ plugin a go and see if that works.

Thanks George.

6

I’ve attempted to use the plugin cordova-plugin-wkwebview-inputfocusfix using source=“npm”, source=“git”, and no source reference at all.
<plugin name="cordova-plugin-wkwebview-inputfocusfix" source='npm' />
<plugin name="cordova-plugin-wkwebview-inputfocusfix" source='git' />
<plugin name="cordova-plugin-wkwebview-inputfocusfix" />

VoltBuider is returning with “UserError: fatal error: ‘CDVWKWebViewEngine.h’ file not found”. Apparently cannot find this plugin. Is there an alternate reference for using this plugin in AppStudio?

7

This seems like a Cordova issue. Maybe you would get more information there?

8

Since WKWebView is now built into the compile process there is no separate plugin which, frankly, boggles my mind as plugins was the fix for not having to do so many cli releases (or that was the explanation given back in the 1.8.x days).

So that leaves us with two keyboard problems:

  1. The input focus problem which is common.
  2. The problem ov the viewport being shrunk when the keyboard is displayed and the viewport not resized when the keyboard is dismissed.

To my understanding the cordova team “swears” both these problems are fixed in the latest version but clearly they’re not.

The fix for the shrinking viewport is this plugin which does indeed solve the problem but comes with a disclaimer that your app may be rejected because the plugin does the very thing your comments about the PR reference.

<plugin name="cordova-plugin-wkkeyboardfix" />

From my experience, the issue of the focus is because you can’t (iOS won’t allow) you to set the focus on a page that isn’t in view. The reason is very related to the shrinking viewport problem. When you set the focus, iOS pops up the keyboard. Doing this while the page is in transition (beforeshow) results in a bunch of wonky stuff.

What I did to solve this was to use a setTimeout to give the page a chance to transition in. I used the timeout method because the framework I use doesn’t have an aftershow event.

What I’d do in your case is to hook onto the aftershow event at which time the page should be fully rendered and then set the focus. If that doesn’t work, try using a setTimeout inside the aftershow event with 125ms value and see if that works.

9

The focus call does run aftershow and was working fine before WKWebView. When I first noticed the issue I did try the timeout option with 150ms. This may work on a web app but not a native iOS app. However, they did say the focus problem was supposed to be fixed in the latest version of WKWebView.

I have not experienced the viewport shrinking problem. That might be web app related?

10

There was a lot of stuff in my apps that worked fine before wkwebview. LOL The solutions i gave were the solutions I came up with that worked for me on iOS 12.x and 13.x… try asking on the Cordova slack channel.