Ionic-framework: bug: Window does not resize correctly when keyboard is open and alert pops up (Android)

[anagstef]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

This bug appears only on Android. When you have focused on an input field (e.g. ion-input) and the keyboard is open, if an alert is presented (or other presentables) the keyboard closes, but the window/app content does not resize, leaving a big blank space under the content. This also affects the ion-virtual-scroll element on the previous page if the alert pops up through a router angular guard when clicking the back button (let's say a "discard changes alert" scenario).

Expected behavior:

Window should resize before opening the alert, so that no blank space appears and also ion-virtual-scroll can calculate content size correctly.

Steps to reproduce:

• Clone this repo: https://github.com/anagstef/ionic-alert-keyboard-resize-bug
• Run npm i
• Run ionic build
• Run npx cap sync android
• Run npx cap open android
• On the device, click any of the items on the main home screen (after the tutorial)
• Focus on the ion-input on top of the screen ("Click here to focus input")
• Tap the navigation back button on the header toolbar of the app
• Bug happens, also when you tap "Yes" you return to the previous screen which is empty because it's virtual scroll

Related code:
https://github.com/anagstef/ionic-alert-keyboard-resize-bug

Check latest commit.

Other information:


screenshot ends here

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.8 (/Users/anagstef/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.0
   @angular-devkit/build-angular : 0.801.2
   @angular-devkit/schematics    : 8.1.1
   @angular/cli                  : 8.1.1
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Cordova:

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

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.1
   NodeJS     : v10.15.3 (/Users/anagstef/.nvm/versions/node/v10.15.3/bin/node)
   npm        : 6.11.3
   OS         : macOS Mojave
   Xcode      : Xcode 10.3 Build version 10G8

[FernetB]

Same here, with ionic 4.7.4. currently with the app in production :(

If i focus an ion-input and then tap in a ion-select, the keyboard is closed but the big blank space remains until i close the alert.

I also opened a bug report with keyboard display and virtual scroll in another page here #18945

[MarcAndreC]

I noticed that bug too on my pixel 2, but it not append on virtual device... I've discover that uninstalling updates from "Android System Webview" (in my case, it downgrade from 76 to 74) app make the bug not occuring anymore. Sound like a new breaking change from Android system webview.

[MarcAndreC]

This issue have already been discussed here. https://github.com/ionic-team/ionic/issues/19065

There is some hack too!

[anagstef]

@Stylemayster oh yea! Indeed it's fixed in Chrome 77 which has been released in the last few days! Thanks a lot! :)

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