Focus on ion-input not properly working on WKWebview

[polcham]

Description: Focusing and typing on an ion-input element in doesn't properly scroll up and focus on the input. There are instances where the texts typed cannot be seen because the keyboard covers the input. Removing WKWebview plugin fixes the focus and scrolling issue.

How to replicate: Install cordova-plugin-wkwebview-engine plugin, create a form with an ion-input element then focus/type on the ion-input.

Environment: Ionic Framework Version: 3.1.1 ionic-plugin-keyboard 2.2.1 "Keyboard" cordova-plugin-wkwebview-engine 1.1.3 "Cordova WKWebView Engine"

[michaelpeterlee]

WkWebView does not respond to .focus()

Eg. document.getElementById('search-input').focus();

We can live without that, however need a solution to another [possibly-related] problem where scrolling is disabled after keyboard is triggered. We have to rotate aspect for it to scroll again.

[danielalvenstrand]

+1 Really need this to work, is there a workaround for wkwebview that anyone knows of? In no possible way I can get the keyboard to programatically open on an input-field.

[michaelpeterlee]

Re: https://github.com/ccorcos/cordova-plugin-wkwebview-engine/commit/e994874583d7e5f4ae1713643dbd8e01c60a0a03

Make these changes to your CDVWKWebViewEngine.m

This solves the focus issue.

[ccorcos]

If you have some spare cycles, you can make a separate plugin that extends the WKWebViewEngine class -- that way we don't have to maintain a fork.

https://github.com/apache/cordova-plugin-wkwebview-engine/pull/37#issuecomment-308598273

[onderceylan]

I just created a class catalog as a cordova plugin to enable focus on WKWebView. You can install it from https://www.npmjs.com/package/cordova-plugin-wkwebview-inputfocusfix.

[ccorcos]

Nice! Thanks @onderceylan

[ccorcos]

@onderceylan do you know if this is possible for JS files as well? I have another PR, but I don't have any confidence it will get merged anytime soon: https://github.com/apache/cordova-plugin-wkwebview-engine/pull/42

[onderceylan]

Do you mean calling element.focus()? If so, yes it works with that.

On Tue, 22 Aug 2017 at 21:04, Chet Corcos notifications@github.com wrote:

@onderceylan https://github.com/onderceylan do you know if this is possible for JS files as well? I have another PR, but I don't have any confidence it will get merged anytime soon: apache/cordova-plugin-wkwebview-engine#42 https://github.com/apache/cordova-plugin-wkwebview-engine/pull/42

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-plugin-keyboard/issues/274#issuecomment-324121784, or mute the thread https://github.com/notifications/unsubscribe-auth/AChN6LMJJ2alIbg3-SO4o4bqur3EoxxNks5sayY7gaJpZM4NaUHc .

[ccorcos]

No, I have another PR that allows you to dynamically set allowsBackForwardSwipeNavigation and it would be nice to do this "catalog class" thing rather than maintaining a fork.

[onderceylan]

@ccorcos I see your point. Yes, you should be able to call the category methods from js as well. When you use categories as I did on my extension plugin, you basically extend CDVWKWebViewEngine class. You should be able to use the same approach as you have on your fork.

[mlynch]

Just merged a fix in our WKWebView plugin which resolves this: https://github.com/ionic-team/cordova-plugin-wkwebview-engine/pull/171

Can someone try the latest version of the wkwebview plugin in master and confirm?

[shaliko]

@mlynch Works for me.

iOS 11

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

autoFocusAssist: 'delay'

<ion-input type="text" autofocus clearInput></ion-input>

[onderceylan]

@mlynch It works for our apps, thanks for the merge.

[Fibonacci-Solucoes-Ageis]

When this will be released? This is not working for me.

[hirbod]

Don't work on iOS 11.3 anymore. Is there any hotfix for it!?

[hirbod]

I found one: https://stackoverflow.com/questions/32449870/programmatically-focus-on-a-form-in-a-webview-wkwebview/48623286#48623286

[hirbod]

I just pushed a working PR https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix/pull/4

[mlynch]

Up for a PR? I’ll merge it @onderceylan

On Sat, Mar 31, 2018 at 2:13 PM Hirbod notifications@github.com wrote:

I just pushed a working PR onderceylan/cordova-plugin-wkwebview-inputfocusfix#4 https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix/pull/4

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-plugin-keyboard/issues/274#issuecomment-377716326, or mute the thread https://github.com/notifications/unsubscribe-auth/AAArzr9v53wa6UxOM9i8gfSHYniXRetIks5tj9VigaJpZM4NaUHc .

--

Max Lynch CEO/Co-founder, Ionic max@ionicframework.com

[hirbod]

@mlynch I already pushed a PR into the Repo of @onderceylan

[mlynch]

Sorry meant you @Hirbod 😅

On Sat, Mar 31, 2018 at 4:22 PM Hirbod notifications@github.com wrote:

@mlynch https://github.com/mlynch I already pushed a PR into the Repo of @onderceylan https://github.com/onderceylan

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-plugin-keyboard/issues/274#issuecomment-377724379, or mute the thread https://github.com/notifications/unsubscribe-auth/AAArzsrwblvjGnjt9nr4uwMVA_aWX9jlks5tj_OmgaJpZM4NaUHc .

--

Max Lynch CEO/Co-founder, Ionic max@ionicframework.com

[hirbod]

@mlynch not sure if this PR belongs to the keyboard plugin or the wkwebview-plugin, as the old fix seemed to be implemented (merged) but never released on the wkwebview-repo. We should first sort this out and I would love to provide a PR :)

[mlynch]

Closing since this is a wk issue and I just pushed a fix for it https://github.com/ionic-team/cordova-plugin-ionic-webview/commit/5ad40ae6b456a0e7edc7f48a307ac2fe52919914. Thanks for the help @Hirbod

[hirbod]

You're welcome @mlynch, and thanks for your fast action on this critical issue.

[hirbod]

@mlynch you might want to give credits for this to https://stackoverflow.com/questions/32449870/programmatically-focus-on-a-form-in-a-webview-wkwebview/48623286#48623286

as I've just copied his answer and incorporated it.