[SOLVED] Messagebar input focus causes app keyboard to cover input field


Note: When i focus on the input field using Android device it works fine. I am able to view the messagebar with no problem. The problem is only when using iOS.

I fully implemented the messagebar component into my application.
When I am testing on actual iOS device… when I tap the messagebar input field the iOS keyboard covers the entire input field. The user is unable to see the text they are typing into the field.

How can I make the messagebar input field pop up so the user can view when they are focused on the input and entering message text ?

The user enters the message into the text input field…

On the iOS the keyboard covers the input field and user cannot see the text they type…

thank you!


If this is running as web app then you can’t do anything with it. If it is a Cordova app you need to install cordova keyboard plugin and enable to shrink the app view on keyboard open


I am running Cordova app. I installed cordova-plugin-keyboard and enabled Keyboard.shrinkView(true);
This has made improvement. Now I can see the messagebar.

However, now when the keyboard shows, it is now creating large space between between. (screenshot below)…

Any idea why this space is occuring?

Thank you!


It appears that this is a known bug on iOS 12 using this plugin.

I am going to try to patch using the zs-fix-keyboard branch made available by github user @zspencer. Hopefully this fixes it. fingers crossed.


This file has not been added to the public master of cordova-plugin-keyboard.

However, I just swapped it out and it fixed my issue… if anyone else runs into the issue… the exact file that resolved it: