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: ionic-team/capacitor#6642 (comment)