Ionic-framework: bug: input focus scroll assist on iOS broken since v4.9

[chriswep]

Bug Report

Ionic version:
[x] 4.9.1 / 4.10.0 / 4.10.2

Current behavior:
Since version 4.9 scrollAssist stoppend working for my input fields on iOS. On version 4.8.1 everything is fine. Tested on both iOS 12 and 13, device and emulator.

Expected behavior:
Input field should be scrolled into view when focussed.

[liamdebeasi]

Thanks for the issue. Are you testing this as a standalone app or in Safari? I'm not able to reproduce this issue, so any additional info you have would be great.

[chriswep]

standalone app, device & emulator. i think you can't reproduce it in Safari, since the scrollAssist is only supposed to jump in when the device-keyboard is visible..

I'm using Capacitor and Keyboard.resize is set to "none". That might be related. However, as stated, it's working on 4.8.1 and stopped afterwards.

[liamdebeasi]

Thanks for the follow up. I'm still not able to reproduce the issue even with Keyboard size set to "none" in the Capacitor config. Can you provide steps to reproduce, including descriptions of what you expect to see happen vs. what actually happens? Thanks!

[chriswep]

i have input boxes within a slide. when one input is focussed, the sliding out keyboard potentially overlays the input. The "scrollAssist" should scroll the input into view, which it doesn't since 4.9.

[corran2go]

I am also having issues with this on iOS, I think in my case this is related to the keyboard plugin, but am not sure:
https://github.com/ionic-team/cordova-plugin-ionic-keyboard/issues/125

[informatikTirol]

I have the same bug on Android and IOS 13 with Ionic 4.10.1. Restored Ionic 4.8.1, then it is working again.

---

Ionic :

Ionic CLI : 5.4.2 (/Users/aj/.nvm/versions/node/v12.4.0/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.10.1
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 7.1.4, browser 5.0.4, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 7 other plugins)

Utility:

cordova-res : 0.8.0
native-run : 0.2.5 (update available: 0.2.9)

System:

Android SDK Tools : 25.2.3 (/Users/aj/Library/Android/sdk)
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v12.4.0 (/Users/aj/.nvm/versions/node/v12.4.0/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 11.0 Build version 11A420a

[vista-54]

Have same issue. First few inputs works well, but latest 2-3 inputs doesn't work.

[Shneeball]

Having the same issue as well.

[informatikTirol]

The same bug on IONIC 4.11.2, restored to IONIC 4.8.1 again.

[informatikTirol]

Thanks for the issue. Are you testing this as a standalone app or in Safari? I'm not able to reproduce this issue, so any additional info you have would be great.

Testing as standalone app on IOS and Android.

[nickstucko]

Same issue here on 4.11.2

[RobertoGoAm]

@liamdebeasi, I'm able to reproduce by using the conference app, no changes needed.

Expected behaviour:
When a field is going to end up behind the keyboard, the view should scroll to accommodate for that.

Current behavior:
The expected behaviour only happens after typing something and does so suddenly.

Steps to reproduce:

1. git clone https://github.com/ionic-team/ionic-conference-app.git
2. npm install in the project root
3. Add the iOS platform ionic cordova platform add ios (tested latest and 4.5.5 which is the one specified in that project and neither work correctly)
4. Build and deploy via XCode to a device that’s short enough that a field near the bottom of the screen is obscured when the keyboard is invoked (iPhone 5s should do)
5. Once in the app navigate to the login page and tap the password field
6. The field is obscured by the keyboard
7. On typing the view will suddenly snap to the field
8. Changing keyboard resize and keyboard resize mode preferences doesn't fix it

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.1 (/Users/roberto/.npm-packages/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.4
   @angular-devkit/build-angular : 0.803.18
   @angular-devkit/schematics    : 8.3.18
   @angular/cli                  : 8.3.18
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 8.0.0
   Cordova Platforms : ios 4.5.5
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 5 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.8.1)
   native-run  : 0.2.8 (update available: 0.2.9)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.1
   NodeJS     : v10.17.0 (/usr/local/Cellar/node@10/10.17.0/bin/node)
   npm        : 6.11.3
   OS         : macOS Catalina
   Xcode      : Xcode 11.2.1 Build version 11B500

Other information:
In my project i checked earlier cordova ios versions and ionic/angular 4.9.x,4.10.x and now this one to no avail. Tested both simulators and devices, different keyboard plugin versions and nothing seems to fix it.

[nikosdouvlis]

We're having the same issues. We were using the latest capacitor and ionic 4.11.5.

Last version that seems to be working is @ionic/angular 4.8.1

[rricamar]

Hi, same here with Ionic v4.11.7

[Nazirovich]

Hello!! same here with Ionic v4.11.8 and v5.0.0-beta.5

[informatikTirol]

Still not working on v4.11.9...

[liamdebeasi]

Can someone provide a repo with the code required to reproduce this issue? I am still unable to reproduce the issue using the steps others have provided.

[informatikTirol]

@liamdebeasi
Here you find a repo : https://www.dropbox.com/s/0r4x114qj2wrjc7/bugInputFocusScroll.zip?dl=0

And here you find a short video: https://www.dropbox.com/s/dd88u1zdpa1px69/CB4m.mov?dl=0

And here the steps how i created the repo:

ionic start bugInputFocusScroll tabs --cordova

package.json:     "@ionic/angular": "^4.11.10",

ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install @ionic-native/keyboard

ionic cordova prepare ios

If you downgrade to

package.json: "@ionic/angular": "4.8.1",

or lower it works

[liamdebeasi]

@informatikTirol Are you able to provide a video of scroll assist working on Ionic 4.8.1 or lower? I can reproduce scroll assist not working on 4.9+, but it doesn't look like it works even on 4.8.1.

[informatikTirol]

@liamdebeasi
Strangely the bug still exists with 4.8.1. I have to add many

<br>
tags under the input field, then the scroll assist is working.

I will send you an other repo where the bug is reproducible by email.

Here the video with 4.8.1 (I duplicated the inputfields many times so scroll assist is needed)
https://www.dropbox.com/s/mjfaxykl9tfb3uy/RPReplay_Final1581146094.MP4?dl=0

Here the video with 4.11.10
https://www.dropbox.com/s/49gu4on768biqyz/RPReplay_Final1581146336.MP4?dl=0

[informatikTirol]

@liamdebeasi
HI Liam, did you get my email? And are you working on that bug?
Looking forward to work with 5.0, i can‘t update as long this bug is not resolved.

THX

[hiepnsx]

+1

[informatikTirol]

No input focus scroll assist on iOS with IONIC 5.0.4 as well.
Here the source: https://www.dropbox.com/s/z9qzf9hd9vh36c2/tabs5.zip?dl=0
Here a short video (input 'test' should scroll above the keyboard): https://www.dropbox.com/s/x65yumd088vyunt/RPReplay_Final1583565207.MP4?dl=0

Expected behavior: touch input -> input gets focus -> scroll input above keyboard so it is visible

Ionic:

Ionic CLI : 6.2.0 (versions/node/v12.4.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.4
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res (update available: 0.9.0) : 0.8.0
native-run (update available: 0.3.0) : 0.2.9

System:

Android SDK Tools : 25.2.3 (Library/Android/sdk)
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v12.4.0 (/versions/node/v12.4.0/bin/node)
npm : 6.9.0
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can everyone try the following dev build and let me know if it resolves the issue?

Ionic Angular:
npm i @ionic/[email protected]

Ionic React:
npm i @ionic/[email protected]

If the dev build does not resolve the issue, please include a repo with the code required to reproduce the issue. Thanks!

[informatikTirol]

@liamdebeasi: glad that you work on that issue, thank you.

I have tried your dev build, does not work.

Here the source: https://www.dropbox.com/s/f5t82tj5bl5d2ga/tabs5IonicDev510.zip?dl=0
Testscreen with inputs is Tab 1.
Android still works as expect.

[liamdebeasi]

Thanks for the follow up. What device/iOS version are you testing this on?

[informatikTirol]

I am testing with IOS 13.3.1, Iphone X.

[liamdebeasi]

Thanks for the follow up. Can you give the following dev build a try? 5.1.0-dev.202003111427.fd8a9f0

I tested this on iOS 12 and iOS 13 and scroll assist seems to be working properly now.

[informatikTirol]

It works, thank you! :)
There is a little lag (I think a little bit longer than with IONIC 4.8.1), but it works..

An other small bug. The last input (Test) is hidden when i start the app. When i select an other input an then close the keyboard, i can scroll to 'Test'

[liamdebeasi]

I think the behavior you are seeing is this: https://github.com/ionic-team/ionic/issues/20614

[informatikTirol]

Yes exactly

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20742 and will be available in an upcoming release of Ionic Framework.

[informatikTirol]

@liamdebeasi
HI Liam, input focus scroll assist is still broken on subpages and modals.
You closed this bug report, here a new one: https://github.com/ionic-team/ionic/issues/20843

[liamdebeasi]

We close issues when the code to fix the bug has been merged into the master branch. This bug fix has not been released yet. We hope to have this bug fix released soon.

[informatikTirol]

Hi, I was working with you on that bug and i used the dev build for testing: 5.1.0-dev.202003111427.fd8a9f0 and also the latest dev build

So the new bug #20843 will be there in the new release.

[liamdebeasi]

Apologies, I misunderstood your previous message. I will look into it - thanks.

[liamdebeasi]

Thanks for following up! I merged a fix in.

[informatikTirol]

It works, thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.