Ionic-framework: Ion-input is pushed behind header after focus on iOS

[MRvanderPants]

Bug Report

Ionic version:


[x] 4.x

Current behavior:
When focussing an ion-input element in iOS, the keyboard opens and scroll up so that the input is properly in view. If you focus another input just below it, keeping the keyboard active, the view scrolls down so that the input is halfway covered by the header.

Expected behavior:
When focussing the second ion-input I expect the view to scroll to a position where the ion-input is centered in the view.

Steps to reproduce:
Select an ion-input. When the keyboard is open, select an ion-input below it. The second input should be positioned somewhere halfway under the header.

Related code:

    <ion-list class="data-form__content">

      <ion-item class="data-form__content__item">
        <ion-label color="secondary" position="stacked">Voornaam</ion-label>
        <ion-input
          [(ngModel)]="info.klant_naam"
          type="text">
        </ion-input>
      </ion-item>

      <ion-item class="data-form__content__item">

        <ion-label color="secondary" position="stacked">Voorletters</ion-label>
        <ion-input
          [(ngModel)]="info.klant_voorletters"
          type="text">
        </ion-input>
      </ion-item>

      <ion-item class="data-form__content__item">

        <ion-label color="secondary" position="stacked">Achternaam</ion-label>
        <ion-input
          [(ngModel)]="info.klant_achternaam"
          type="text">
        </ion-input>
      </ion-item>

      ....
    </ion-list>

Other information:
I'm opening this as a new issue based on this issue, as it was locked by the ionic bot.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (C:\Users\sjoerd\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.9.0-rc.1
   @angular-devkit/schematics    : 7.0.0-rc.1
   @angular/cli                  : 7.0.0-rc.1
   @ionic/angular-toolkit        : not installed

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.17
   @capacitor/core           : 1.0.0-beta.17

System:

   NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.6.0
   OS     : Windows 10

[SmirnovM91]

+1

[Jeroenem]

+1

[MRvanderPants]

Any updates on this?

[alexdiaz]

+1

[alexdiaz]

Same issue

Example code:

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label position="stacked">Input 1</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Input 2</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Input 3</ion-label>
      <ion-input></ion-input>
    </ion-item>
    ...

Video demo:
https://vimeo.com/330719598

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.0, (and 8 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v11.3.0 (/usr/local/Cellar/node/11.3.0_1/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[denisroldan]

Same here:

Code:

(...)
<ng-container [formGroup]="group">
  <ng-container [formArrayName]="config.name">
    <ion-item>
      <ion-label position="stacked">{{ config.label }}</ion-label>
      <ion-input
        placeholder="{{ 'ADDRESS_LINE_1' | translate }}"
        formControlName="address_line1"
        [required]="true"
        name="address_line1"
        type="text"
      ></ion-input>
      <ion-input
        formControlName="address_line2"
        placeholder="{{ 'ADDRESS_LINE_2' | translate }}"
        [required]="false"
        name="address_line2"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'CITY' | translate }}"
        formControlName="city"
        [required]="true"
        name="city"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'REGION' | translate }}"
        formControlName="region"
        [required]="true"
        name="region"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'POSTCODE' | translate }}"
        formControlName="postcode"
        [required]="true"
        name="postcode"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'COUNTRY' | translate }}"
        formControlName="country"
        [required]="true"
        name="country"
        type="text"
      ></ion-input>
    </ion-item>
  </ng-container>
</ng-container>
(...)

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.19
   @capacitor/core           : 1.0.0-beta.19

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 8 other plugins)

System:

   ios-deploy : 1.9.0
   ios-sim    : 4.1.1
   NodeJS     : v10.11.0 (/usr/local/bin/node)
   npm        : 6.9.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2.1 Build version 10E1001

Video:
https://youtu.be/rU4fLYNtIMQ

[pegler]

I believe at least one issue here is that the calculations to decide how far to scroll doesn't take into account if the keyboard is open or not. In my testing, the scrolling works as intended when the keyboard is closed, but changing focus from one input to another while the keyboard is open causes the scroll to be incorrect.

Here's the relevant code from what I can tell: https://github.com/ionic-team/ionic/blob/58c2a911d54a9ab4641e178f8774ee1c56d6febe/core/src/utils/input-shims/hacks/scroll-data.ts#L21

It looks like @brandyscarney worked on an ios scrolling related issue here that got me going down the right path.

I think the issue @denisroldan posted is slightly different since there are multiple ion-inputs in the same ion-item. The calculations for scrolling use the input's ion-item rather than the input itself, for some reason: https://github.com/ionic-team/ionic/blob/58c2a911d54a9ab4641e178f8774ee1c56d6febe/core/src/utils/input-shims/hacks/scroll-data.ts#L11

[brandyscarney]

Thanks a ton to @pegler for working on this! I created a dev build with his PR: 4.5.0-dev.201905141454.56040e0 if anyone would like to test it out and let us know if you see anything wrong. It seems to be working well for me, I will merge it in soon. 🙂

[pegler]

It's working great for me @brandyscarney. Thanks for the quick review and merge!

[adamduren]

@brandyscarney Works for me as well. Was driving me insane! Thanks to everyone who made this happen. Any chance it can be a patch release? 4.4.1

[brandyscarney]

@adamduren It will be in the next patch release, scheduled next Wednesday.

[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.