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.