bug: scroll assist does not re-run when changing keyboards

[maxfloden]

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: On iOS14 keyboard height changes when selecting Emojis, this causes ion-input field to be hidden by keyboard. Switching back from Emoji to ABC shows input field again as keyboard height again decreases.

Expected behavior: Input field should always show above keyboard, not behind.

Steps to reproduce:

Related code:

html

<ion-content>
  <div class="backdrop_container"  (click)="goBack()"></div>
</ion-content>

<ion-footer>
  <ion-list lines="none">
    <ion-item>
      <ion-input [(ngModel)]="message" type="text" placeholder="{{'COMMENT.saysomething_pl | translate'}}"></ion-input>
      <ion-button (click)="submit()">
          <img src="../../../assets/icon/chat-send.svg" width="25px"/>
      </ion-button> 
    </ion-item>
  </ion-list>
</ion-footer>

scss

ion-content{
    --background: transparent;

    .backdrop_container{
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
    }

}

ion-footer {
    ion-input{
        height: 40px !important;
    }

    ion-button{
        width: 45px !important;
        height: 45px !important;
        padding: 0;
        --background: var(--ion-color-green);
        --border-radius: 25px;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.4 (/Users/xxx/.nvm/versions/node/v14.15.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.4
   @angular-devkit/build-angular : 0.901.14
   @angular-devkit/schematics    : 9.1.14
   @angular/cli                  : 9.1.14
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-webview 5.0.0, (and 11 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run                             : 1.3.0

System:

   ios-sim : 8.0.2
   NodeJS  : v14.15.1 (/Users/xxx/.nvm/versions/node/v14.15.1/bin/node)
   npm     : 6.14.8
   OS      : macOS Big Sur
   Xcode   : Xcode 12.3 Build version 12C33

[elenche]

@liamdebeasi any progress on this issue? Do you need reproduction link or more info? Facing the same thing in iOS 16.

Added listener to the Capacitor Keyboard events, and the following happens:

• Press on input field -> event keyboardDidShow fires, keyboard shows up, content is correctly pushed up
• Press on emoji field on keyboard -> event keyboardDidShow fires, emoji keyboard shows up, content is reset (and hidden behind the keyboard)
• Press away from keyboard -> event keyboardDidHide fires

[liamdebeasi]

The remaining step is figuring out a good solution for the problem. Scroll assist currently runs on input focus, but it sounds like we also need it to run when the keyboard changes. We might be able to rely on ionKeyboardDidShow to re-run scroll assist since that would cover web and native. The tricky part will be to make sure that it doesn't re-run whenever inputs are focused for the first time (since the keyboard will also open then)

[elenche]

@liamdebeasi thank you for your explanation.

Upon further research it seems that this is related to another issue that seemed to happen when upgrading to @capacitor/keyboard@4.1.1 and is fixed in ionic version 7.0.9. I downgraded to @capacitor/keyboard@4.1.0 and the issue we're facing here disappeared. I haven't had the chance to test if being on @capacitor/keyboard@4.1.1 and ionic@7.0.9 will fix the issue because I can't upgrade to Ionic 7 right now.

[liamdebeasi]

That issue was fixed in the Capacitor Keyboard plugin and released a few days ago: https://github.com/ionic-team/capacitor/issues/6642#issuecomment-1584035781

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix if you are interested in testing: 7.3.4-dev.11694698515.1504c90b

Install Example:

npm install @ionic/angular@7.3.4-dev.11694698515.1504c90b

Note on behavior:

1. In Cordova/Capacitor scroll assist will re-run whenever the keyboard changes.
2. In a browser/PWA scroll assist will only re-run whenever the keyboard geometry changes. We don't have a cross browser way of detecting when the keyboard opens yet.

edit: I found a bug so I included a new dev build

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28174, and a fix will be available in an upcoming release of Ionic Framework. Feel free to continue testing the dev build, and let me know if you run into any issues.

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