Use iOS keyboard next button scrolls too much if disableScroll is set to true

[jgw96]

From @dpalou on December 12, 2016 11:57

Ionic version: (check one with "x") [x] 1.x [ ] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: We've set cordova.plugins.Keyboard.disableScroll(true) to fix the problem with header bouncing (see https://github.com/driftyco/ionic/issues/9346).

But then we found another problem: if the next input element is under the keyboard (not visible), the view scrolls too much and the focused input ends up being too high in the view so it's not visible either.

Expected behavior: The next input should be focused and visible.

Steps to reproduce: Cannot reproduce it in a plunkr since it requires ionic-plugin-keyboard. I created a gist with some files to apply to a blank project so it's easier to reproduce it:

https://gist.github.com/dpalou/5b723232c9352c4f859571d588ef1fc0

• Create a project with ionic-plugin-keyboard.
• Make sure to call: cordova.plugins.Keyboard.disableScroll(true); cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
• In the index.html, add a nav bar.
• Create a view with a form with several input text (enough to have scroll in the view).
• Install the app in a iOS device.
• Select the last input visible. Once the keyboard is open, use the "next" arrow to go to the next input.

Expected: The next input is focused and visible. Current behaviour: The view scrolls too much so the focused input is above the visible part.

Other information: I debugged the code a bit and I found that the function scrollChildIntoView is called twice.

First the function keyboardFocusIn is called and, since the keyboard is already open, it calls keyboardShow.

Then the event native.keyboardshow is triggered, executing the function keyboardNativeShow that also calls keyboardShow.

Since the scrollChildIntoView is called twice, the view is scrolled too much (in my case it scrolls 199.5 every time for a total of 399). I verified that the view should only scroll 199.5 to work fine.

Ionic info:

Cordova CLI: 6.1.1
Gulp version:  CLI version 1.2.2
Gulp local:   Local version 3.9.1
Ionic Version: 1.3.2
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.8.5 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62 

Copied from original issue: driftyco/ionic#9599

[jgw96]

Hello @dpalou ! Thanks for opening an issue with us! Would you mind installing the latest nightly of the framework (npm install ionic-angular@nightly --save), setting this cordova.plugins.Keyboard.disableScroll(true) back to the default and then trying again? We have made a ton of fixes lately with input scrolling which should fix this issue.

[jgw96]

From @dpalou on December 13, 2016 7:38

Thank you @jgw96 ,

I executed the npm install as you suggested but I cannot find any "bundle" file in there to use in my app. Do you have any guide on how to build it?

[jgw96]

From @dpalou on February 6, 2017 11:38

Hi again,

I noticed that the nightly you suggested is Ionic v2, but we're using Ionic v1.3.2 (as it's specified in the first post).

Also, we were able to replicate the problem without using the next button, also in iOS. In this case, we have a textarea (200px height) whose bottom is under the keyboard (just the last 20px or so). If we focus the textarea with the keyboard already opened, the scrollChildIntoView function is called twice too.

[bassamseif]

hi @jgw96, does this solve it in the browser as well? or is it only an app solution

Current behavior: We've set cordova.plugins.Keyboard.disableScroll(true) to fix the problem with header bouncing (see driftyco/ionic#9346).