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: ccorcos/cordova-plugin-wkwebview-engine@e994874

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.

apache/cordova-plugin-wkwebview-engine#37 (comment)

[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: apache/cordova-plugin-wkwebview-engine#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 ***@***.***> 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 <apache/cordova-plugin-wkwebview-engine#42> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#274 (comment)>, 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: ionic-team/cordova-plugin-wkwebview-engine#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
onderceylan/cordova-plugin-wkwebview-inputfocusfix#4

[mlynch]

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

On Sat, Mar 31, 2018 at 2:13 PM Hirbod ***@***.***> wrote: I just pushed a working PR onderceylan/cordova-plugin-wkwebview-inputfocusfix#4 <onderceylan/cordova-plugin-wkwebview-inputfocusfix#4> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#274 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAArzr9v53wa6UxOM9i8gfSHYniXRetIks5tj9VigaJpZM4NaUHc> .

-- Max Lynch CEO/Co-founder, Ionic [email protected]

[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 ***@***.***> 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 <#274 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAArzsrwblvjGnjt9nr4uwMVA_aWX9jlks5tj_OmgaJpZM4NaUHc> .

-- Max Lynch CEO/Co-founder, Ionic [email protected]

[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 ionic-team/cordova-plugin-ionic-webview@5ad40ae. 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.