Posted in Uncategorized

bug: IonInput focus delay in mobile (ios) in 5.0.7 compared to 5.0.5 when in IonContent below keyboard

   September 28, 2020  8 Comments on bug: IonInput focus delay in mobile (ios) in 5.0.7 compared to 5.0.5 when in IonContent below keyboard

Bug Report

Ionic version:

[x] 5.0.7

Current behavior:
The delay on focus for ios keyboard animation of IonInput is significantly longer in 5.0.7 than 5.0.5.

Expected behavior:
Smooth transition on selecting inputs in mobile.

Steps to reproduce:
Open this app: https://github.com/ionic-team/ionic-react-conference-app/blob/master/package.json
Add this code to ScheduleView somewhere in the IonContent. Make sure the input is below where the keyboard would show on mobile so just put it at the bottom of the IonContent.

<IonInput placeholder="test"></IonInput>

Open chrome dev tools and hop into mobile view. Click on the input and watch how long it takes to focus. Should be smooth. Now, upgrade to 5.0.7 for ionic/core and ionic/react. Reload app. Check out how slow the focus is on that input.

Full dicussion on github.com

8 thoughts on “bug: IonInput focus delay in mobile (ios) in 5.0.7 compared to 5.0.5 when in IonContent below keyboard”

  1. Hello, I’m sorry for getting into the middle of this, but I’d like to be up to date on this too and help to clarify the issue.

    I’m experiencing something like this, not sure yet if it’s the same thing reported above. Anyway, when focusing on the input it takes some time until it gets focused and also for the screen goes up.

    Also, scroll animation isn’t smooth, as you can see below:

    RPReplay-Final1585788402

    Ionic info:

    Ionic:

   Ionic CLI                     : 6.3.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 1.5.2

Utility:

   cordova-res : 0.11.0
   native-run  : 0.3.0

    I appreciate your help and time.

  2. So yeah it’s really two parts. It’s the delay that really bothered me. That’s what @nncl showed nicely in his screen video. This is solved by moving from 5.0.5 to 5.0.7.

    The second part is scroll assist being choppy (the screen moving up is not smooth but happens all at once at the end of the keyboard moving up). This is broken in 5.0.5 and 5.0.7. It works, but it’s pretty annoying.

  3. Yeah keyboards + inputs in a webview have always been pretty annoying. I’ll mark this as an enhancement since it sounds like we need to find a new way of bringing inputs into view.

  4. Hi all,

    another video similar to @nncl‘s that shows the difference in input focus speed between 5.0.5 and then 5.0.7 for iOS.

    what I am seeing is that focusing input elements in 5.0.7 is actually much slower for “time to input” than 5.0.5 …

    in the second recording below, you can see the time-to-input delay for the second field (Password) is much longer – additionally, when toggling between the fields, you can see the caret is slow to render in the second field as well.

    this example is just a simple angular formgroup: https://gist.github.com/mvberg/449d09f8b40fe180b8cf2024818a7427

    Good:

    ionic_5_0_5

    Ionic:

   Ionic CLI                     : 5.4.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.5
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : not installed
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Catalina

    Bad:

    ionic_5_0_7

    Ionic:

   Ionic CLI                     : 5.4.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : not installed
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Catalina

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

    Ionic Angular:
    npm i @ionic/angular@5.1.0-dev.202004071444.acaa1d9

    Ionic React:
    npm i @ionic/react@5.1.0-dev.202004071444.acaa1d9

    I changed two things:

    1. Added a listener for the keyboardWillShow event which typically gets fired before the resize event. This should improve response time for those running their app in Cordova/Capacitor.
    2. Changed the fallback timer (in case neither resize nor keyboardWillShow get fired) from 1000ms to 300ms. This should improve response time for those running their app in a mobile web browser.