Doesn't scroll to input on focus when KeyboardShrinksView enabled

[nikdo]

When KeyboardShrinksView is enabled it breaks the functionality of scrolling to the focused element. When the input is in the bottom part of the window keyboard appears on top of it.

• iOS 11.0, iOS 10.3
• clean Cordova project, no other plugins installed
• HTML consists only of text and input

Is it a quid pro quo or a bug? If the former, it would be helpful to mention it in a documentation.

[Helecas]

Hi I'm facing the same problem. In my case I have a page with a lot of inputs. When the focus is triggered the page doesn't scroll well.
I tried to manage this issue by scrolling it after, but doesn't work well.
The next clicks/focus goes behind the keyboard.

There is any chance to fix this issue or create an work around?

[nikdo]

I have found a workaround. This scrolls the focused input to the top of visible area:

document.addEventListener('deviceready', function() {
  Keyboard.shrinkView(true)
  window.addEventListener('keyboardDidShow', function () {
    document.activeElement.scrollIntoView()
  })
})

If you want input to be centered instead, use this polyfill.

Reasoning behind this solution:

i0S Cordova mimics native app by wrapping a web app into UIWebView or WKWebView component. The web view behaves similarly to iOS Safari: when an input is focused and the keyboard appears, the input is centered in the remaining space. That happens without changing viewport.

Keyboard.shrinkView method of cordova-plugin-keyboard resizes web view component when the keyboard appears. This blocks automatic scrolling of web view to focused input, unfortunately.

I'm afraid there is no easy native solution for this. See this comment on ionic issue and this Stack Overflow answer. Web view just wasn't built to contain the whole app and this is the price we have to pay.

Provided JavaScript solution is similar to what is advised to do in native iOS apps when keyboard hides input.

[Helecas]

Thanks for your solution. I'll give a try and see how the app behave with this jquery.

[leanbalma]

Same here on Android. Tested on Android 8.1.0.

[cjpearson]

@leanbalma, does the document.activeElement.scrollIntoView() solution work for you?

[leanbalma]

@cjpearson It does, but there's no keyboardDidShow event on Android that I can use to trigger the action.

[MatthewPringle]

If I start the app with window.Keyboard.shrinkView( false ) it doesnt shrink the view but it also doesnt scroll to the input. The keyboard shows and the page remains exactly the same, nothing scrolls into view, nothing moves etc...

[novarx]

I have the same Issue on Android - when immersiveMode is set, the shrinkView is somehow disabled.
As @leanbalma mentioned, the keyboardDidShow-Workaround doesn't work on Android.