Cordova Status Bar Plugin (with StatusBar.overlaysWebView(true)) hides the input when the keyboard appears

[tharunkumar0]

I am having an input text box at the bottom of the page which on clicked, the keyboard appears and the text box goes behind the keyboard. This doesn't happen when I remove the cordova status bar plugin. I tried many solution that involves adding the cordova keyboard plugins but didnt work.

[janpio]

What platform?
What versions of everything?

[tharunkumar0]

It's on android 7.1.1

[tharunkumar0]

I've enclosed the screenshots :)

[tharunkumar0]

Expected behavior

[janpio]

Ahem, I see big screenshots - but not really what is going on and what is wrong. Could you resize and annotate maybe?

[tharunkumar0]

sure!

[tharunkumar0]

*cordova

[janpio]

And without the statusbar plugin, you get the same result as in the browser?

I think it would be important to have a super simple project that replicated the problem here. Meaning: cordova create, add the platform and this plugin and some minimal html code that replicated this behaviour so one can test it. Please create such a project and put it up on Github and post the link here.

[tharunkumar0]

Yeah without the status bar plugin, I get the same result as the browser :)
Actually I just got the html from the designer and the cordova project had only this plugin enabled :) :)

I'll do what you've asked soon and post a link here!

[janpio]

Best minimize the HTML as well so it is really just the needed elements then please.

[tharunkumar0]

Sorry For the late action. Here's a simple project demonstrating the issue
test.zip

[janpio]

Please create a repository on Github and upload the code there. That can be checked out and tested directly on the command line. THanks.

[tharunkumar0]

done :)
https://github.com/tharunkumar0/test

[janpio]

Ok, have it running (had to delete node_modules and run npm i) on my Android device (Nexus 5, Android 6.0.1):

1. I see no statusbar at all by default.
2. When I tap into the "Message" input field, the keyboard pops up and the input fields disappears.
3. Removing the plugin makes the statusbar appear and the input field is visible over the keyboard when tapping into it.

Everything as expected?

[tharunkumar0]

1. That's because of the color of text and background being white. Check again?

Yeah other than that everything as expected! 👍

[janpio]

Oh right, there it is in white font. But it overlays the webview on my app, is this expected? Don't see that in your screenshots of the original app.

[tharunkumar0]

Yeah that's expected because I've enabled screen overlay ;)

[janpio]

Understood.

---

The following answers: What is going on here?

I duplicated the app so I have one with plugin (and the bug), and one without. Then I remote debugged both using Chrome:

With plugin, no matter if I am in the input or not I have this representation of the Webview in devtools:

Without the plugin, I have two different states:

(Note that this is also a few pixels less high - as the toolbar is not applied onto the webview and thus is not part of this screenshot)
But as soon as I have the cursor in the input and the keyboard pops up:

This tells me that with the plugin, the webview is not really resized when the keyboard appears but stays the same size, making the input field disappear behind the keyboard.

Next question: Why?

[janpio]

Ok, this got me thinking: Is it really the presence of the plugin causing the behavior or is it actually the usage of some specific functionality?

I changed the code in onDeviceReady to read:

    //StatusBar.overlaysWebView(true);  
    //StatusBar.styleBlackTranslucent();
    StatusBar.backgroundColorByName("red");

Now I have a red statusbar, and the input field is still visible above the keyboard.

Conclusion: The presence of the plugin is not the problem, the usage of specific features of it might cause this.

---

My guess would have been StatusBar.overlaysWebView(true);, but your screenshot @tharunkumar0 does show a statusbar in the screenshot with the bug. Can you explain? What exactly are you using of the plugin in your original app?

[tharunkumar0]

Since, I've used StatusBar.overlaysWebView(true); , The Statusbar just overlays on top of the page. The page has a blank top to blend with the status bar :)

[janpio]

Sorry, I don't understand. Did you move the app top bar down a bit so it looks normal?
If so, can you confirm the broken behaviour is gone as soon as the statusbar does not overlay the webview any more?

[tharunkumar0]

yeah exactly!
yeah if I don't use Statusbar overlay even with the plugin added, it doesn't break!

[janpio]

Ok, so using StatusBar.overlaysWebView(true) makes the webview not shrink when the keyboard appears. That sounds like a bug.

[tharunkumar0]

Yeah!! in iOS, it shrinks a little but still the input is not visible!

[janpio]

Oh, someone/I will have to look into iOS later as well then.

[breautek]

Here is what I have gathered...

When the statusbar is in overlay mode, this sets the view to be in fullscreen. This is required for a transparent status bar. However, when the view is in fullscreen mode, then the view cannot resize. It will remain full screen even if the keyboard is shown. This results the keyboard overlapping the view.

I've tried some hackish workarounds, but none of them really work or produced undesirable side effects.

By default, the android app is configured with SOFT_INPUT_ADJUST_RESIZE, which says the view should resize when the keyboard is shown.

From the android docs...

If the window's layout parameter flags include FLAG_FULLSCREEN, this value for softInputMode will be ignored; the window will not resize, but will stay fullscreen.

Android Documentation

For the record, I tried using SOFT_INPUT_ADJUST_PAN, but neither options appears to work with full screen.

[breautek]

Ok I think I have a working solution for android. I don't have a mac or an iOS device, so I can't be of any help there.

I'm not an official contributor, and reading the instructions I need to sign an Apache ICLA? But I don't see how I can obtain and sign one. But I'll be more than happy to work with the cordova team with this to get a PR in.

In the meantime, you can try using my fork
cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize

Tested on an Android 8 device.

[tharunkumar0]

Heyy @breautek Happy New Year!! :)

Thank you so much for taking your time to fix it! :D

It works near to perfect now in Android!

Still there are problems in iOS

[breautek]

@tharunkumar0 I've checked with my colleague and we could not reproduce the issue on iOS 11 & 12 devices running the cordova ios platform 4.5.5. Someone else on https://issues.apache.org/jira/browse/CB-13300 also claimed that they tested iOS on cordova platform 4.5.5 and could not reproduce the issue. So it might be possible that there is something else unrelated going on there for you on iOS.

[Kal-Aster]

Hi there, I encountered the same issue developing my app. Reading all about this issue I was trying to download the fix to update the plugin, but I can't because the link in this comment is redirecting me to the home page of the repository.
Where can I download the fix?

[breautek]

Where can I download the fix?

The PR hasn't been merged in yet. But you can install and use my fork instead of the official cordova version in meantime using the command line in my earlier post.

cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize

You can also watch #128 which is the PR for this issue, so you know when you can switch back to the official version.

[Kal-Aster]

Got it! Thank you so much!

[shoebsd31]

With status bar an in-app browser plugin, the following change in config.xml resolved the issue for me

<edit-config file="*-Info.plist" target="UIStatusBarHidden" mode="merge"> <true/> </edit-config> <edit-config file="*-Info.plist" target="UIViewControllerBasedStatusBarAppearance" mode="merge"> <false/> </edit-config>

[Hanzofm]

This

Ok I think I have a working solution for android. I don't have a mac or an iOS device, so I can't be of any help there.

I'm not an official contributor, and reading the instructions I need to sign an Apache ICLA? But I don't see how I can obtain and sign one. But I'll be more than happy to work with the cordova team with this to get a PR in.

In the meantime, you can try using my fork
cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize

Tested on an Android 8 device.

Thanks, the problem stills on new version of this official plugin and ionic 5, can someone merge the solution?

@breautek can apply your changes to last stable version?

[breautek]

I'm not sure if my PR will ever be merged tbh, testing against newer webviews (chrome 74+) the webview semes to update when the keyboard is shown now, something that didnt' happen in the past. This means that content is no longer hidden by the keyboard. Not sure exactly when this change happened, but if the chrome webview is doing this automatically, then it renders my PR redundant (because that's what my PR did...)

Additionally the next major of cordova-android (not yet released) will be dropping support for android 4.x and 5.0, so supporting older versions of the webview won't be a concern anymore going forward.

[Hanzofm]

Hi @breautek,

On my current project with:

-cordova-android 8.1.1
-ionic 5.
-last version of cordova-plugin-statusbar.
-deployed on a android 9.

When I click into a input the keyboard overlaps it. Then, If I restart the app with StatusBar.overlaysWebView(false) this does not happen.

With your fork of the repo this problem not happen.

What would be happening?

[breautek]

When I click into a input the keyboard overlaps it. Then, If I restart the app with StatusBar.overlaysWebView(false) this does not happen.

Ahh.. I think I forgot about the overlay mode and was probably operating with the solid status bar... I'll try to retest tonight and see if I can get my PR moving again.

[nelsyeung]

@breautek Just wanna say thank you! Your fork works perfectly. Tested on iPhone X iOS 13 and Samsung S10+ Android 10. It'd be so good if the PR is in after this long wait.

[JayzeeHuang]

Just simply move everything you need to <ion-footer></ion-footer> will get fixed

[keertisharma7]

Yes it works with this fork! cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize Remove your existing plugin and add this!

…

On Mon, 3 Dec 2018, 8:53 pm ParulShukla90, ***@***.***> wrote: +1 @tharunkumar0 <https://github.com/tharunkumar0> were you able to solve it? I am facing the same issue — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#110 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ArbXBkUR4MwHc_oodyMFR2J73zV250t4ks5u1UH3gaJpZM4YbmnZ> .

[crapthings]

Yes it works with this fork! cordova plugin add breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize Remove your existing plugin and add this!
…
On Mon, 3 Dec 2018, 8:53 pm ParulShukla90, @.***> wrote: +1 @tharunkumar0 <@tharunkumar0> were you able to solve it? I am facing the same issue — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#110 (comment)>, or mute the thread <github.com/notifications/unsubscribe-auth/ArbXBkUR4MwHc_oodyMFR2J73zV250t4ks5u1UH3gaJpZM4YbmnZ> .

https://streamable.com/13paj7

tried this pull request but the issue remains

the black screen is im about click the hide/show statusbar button, the screen recorder broken, but you can still see the issue

[mrbdrm]

cordova plugin add
https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize
i get an error and cant add it. is there any other way?

[nelsyeung]

@mrbdrm
I've been using this link instead, give it ago:
https://github.com/breautek/cordova-plugin-statusbar.git#430e7df32c0937d46e3a596b37ecbd50a42cb9c3

cordova plugin add
https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize
i get an error and cant add it. is there any other way?

[mrbdrm]

@nelsyeung
still no luck

Failed to fetch plugin https://github.com/breautek/cordova-plugin-statusbar.git#430e7df32c0937d46e3a596b37ecbd50a42cb9c3 via registry.
Probably this is either a connection problem, or plugin spec is incorrect.

[juuulienr]

@mrbdrm I've been using this link instead, give it ago: https://github.com/breautek/cordova-plugin-statusbar.git#430e7df32c0937d46e3a596b37ecbd50a42cb9c3

It works for me, thanks !

[dogofpavlov]

I would love to know why this particular commit works yet the latest on this repo does not... Was this particular fix undone by another commit after the fact? If so why? Using cordova-android 10 on the latest and greatest of everything... this particular commit is the only thing that seems to behave properly

[dogofpavlov]

@juuulienr do you know?

[juuulienr]

@dogofpavlov i have check the commit and all the modifications from the recent one but i can't find what is fixing this bug

[dogofpavlov]

@juuulienr thanks for the reply... yeah I was hoping to figure out what the difference is and copy it into the latest, if you find out I'd appreciate the info, i'll do likewise

[juuulienr]

@dogofpavlov yes of course! I don't have a lot of time now, i will probably look this summer unless someone finds before.

[anuraj01]

Seems like this issue occurs on the latest version v3.0.0. Do we have any workaround to fix this input hide when keyboard overlays??