setFocus() scrolling issue

Ionic Framework ionic-v3
1

These things should really be history, hopefully I’m just missing something really obvious. I haven’t been able to find people with these specific problems, there was always some slight variation and their solutions didn’t work :confused: Probably because 99% of what shows up, whenever you search for anything keyboard related, is about pushing the whole screen up when the keyboard opens, or the keyboard covering content…

  • On iOS, using setFocus() on an ion-input scrolls to the input, so that it is in view and not covered by the keyboard, but it scrolls the entire app, causing the header and eventually other inputs and parts of the page to go behind the statusbar. Simply tapping the input scrolls the ion-content and not the entire app. Video: https://streamable.com/oz733 (Note: Clicking the arrows to go up/down has the same effect)

  • On Android, it scrolls the ion-content, so that’s good, but it doesn’t care about the keyboard, so the focused inputs go behind it. Just to clarify, the padding of the content when the keyboard is open works just fine, I can scroll down to the input. Tapping on an input that would be covered by the keyboard scrolls into view just fine.

  • A minor thing: On Android there is extra padding for the keyboard like the word suggestion thing is there, even though it isn’t.

Does anyone know any solutions to these problems?

Other info:

  • I am using the WKWebView (well, at least it’s installed and specified in the config.xml, though I have no idea if it’s actually using it …)
  • Devices: Samsung Galaxy S5 (6.0.1), iPhone 8, iPhone 6, iPhone 5s, and various iOS simulators. All iOS versions being iOS 11.

ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.13.1
ionic (Ionic CLI) : 3.13.2

global packages:

cordova (Cordova CLI) : 7.1.0
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.7.1

System:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.2
ios-sim           : 6.0.0
Node              : v6.10.0
npm               : 2.15.12
OS                : macOS Sierra
Xcode             : Xcode 9.0.1 Build version 9A1004

Misc:

backend : legacy

config.xml omitted some stuff 

<engine name="android" spec="^6.3.0" />
<engine name="ios" spec="^4.5.2" />
<preference name="AndroidLaunchMode" value="singleTop" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="BackupWebStorage" value="none" />
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<preference name="DisallowOverscroll" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="Orientation" value="default" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="target-device" value="universal" />
<preference name="UIWebViewBounce" value="false" />
<preference name="webviewbounce" value="false" />
<feature name="CDVWKWebViewEngine">
	<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<plugin name="cordova-plugin-ionic-webview" spec="1.1.16" />
<plugin name="ionic-plugin-keyboard" spec="2.2.1" />

Thank you if you bothered reading it all!

2

So switching to cordova-plugin-ionic-keyboard instead of ionic-plugin-keyboard fixed it, but introduced some other bugs which I think are only relevant for my project.

Also using

<preference name="KeyboardResizeMode" value="ionic" />

with the new plugin. body seems fine too, but native makes inputs/scrolling quite buggy.