Ionic-framework: Keyboard issue with Ionic4

[Dak1411]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

Keyboard covers the input field

Expected behavior:

Screen should goes up when the keyboard appear

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\User\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.7
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (C:\Users\User\AppData\Local\Android\Sdk)
   NodeJS            : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

[ffMathy]

I think this is caused by https://github.com/ionic-team/cordova-plugin-ionic-keyboard/issues/61, which is unfortunately overlooked by the Ionic team, and they never reply there.

Not much hope I'm afraid.

[Dak1411]

Oops! That is seems to be a high priority one, right @ffMathy?

[untilbit]

I have this issue too in Ionic 4. In Ionic 3 it was working fine.

[rodrigojrmartinez]

I'm having this issue as well. It's quite a nightmare. If you happen to have a form with several inputs this makes the experience really bad to the user.

Something I've noticed is that over a blank ionic project, the screen adjust while focusing inputs and the keyboard is opened (but is still limited and have some cases in which the screen doesn't adjust as you would expect). But on my current project the screen doesn't adjust at all, which is even worst (been trying to find out why but the configurations are the same). Now I'm trying to solve it manually and to be honest it's not that simple since there are many cases;

• click on an input -> expect the screen to adjust by scrolling and making the input visible always
• clicking outside an input -> keyboard should close and screen should go back to the initial position it was before opening it respecting the scrolled position
• clicking on 'next' keyboard button -> next input should be focused, and screen should adjust as well
• clicking on input when keyboard already opened
• navigating to next input fields and keyboard changes (like regular keyboard -> password keyboard -> numeric keyboard)
• etc....

I honestly haven't used ionic 3, so I don't really know how it behaved over there, but this seems like quite an important functionality to have.
I've seen there were some configurations over ionic 3 when importing the IonicModule for root.
Some other preferences you could define over config.xml but they don't change this behavior I end up seeing.
Also, I'm using the keyboard service provided by ionic's plugin but it seems to be quite limited and no possibilities to work over the screen while keyboards open or closes.
It seems this should be something native to support since its a very basic thing to have forms and interact with inputs + keyboards popping in and out

Is this a known issue by the ionic team? It is expected to provide a fix or a better approach for handling this?

[NathanDowner]

I've been experiencing the same issues as well as the following:
Sometimes when you click out of an input field, the keyboard disappears, leaving behind a white space in its place.

[vzdeadler]

I've been experiencing the same issues as well as the following:
Sometimes when you click out of an input field, the keyboard disappears, leaving behind a white space in its place.

That issue happens to me aswell, did you found any solution?

[hiepnsx]

+1

[jjacobs33589]

I'm having this issue too

[liamdebeasi]

Thanks for the issue! There have been numerous keyboard improvements that have shipped as of Ionic Framework v5.1.1. I strongly encourage you to update your applications and try the improvements as they should resolve this issue.

Regarding the issue noted in https://github.com/ionic-team/ionic/issues/17926#issuecomment-553188344, this is a Chrome WebView issue that has since been resolved (see: https://github.com/ionic-team/ionic/issues/19065#issuecomment-521370741).

Please open a new issue for any new bugs you run into. Thank you!

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