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.

[tharunkumar0]

Yeah okay :)

[tharunkumar0]

Any updates? (:

[janpio]

No, the problem is reproduced and documented above, now someone has to analyze what code is causing this and find a way to fix this. I am not an Android programmer, so I can't do that and the other committer to Cordova are volunteers as I am - so I can't tell you when someone is going to look at this.

Feel free to take a look yourself of course! The code is normally pretty readable and with the description above you might be able to just follow what is going on. Finding the code responsible for the resizing of the webview if the option is set / no set would be a good first step.

[tharunkumar0]

Okay I'll try doing it :) And I'm very new to app development.. I am a web developer

[rayudurajesh]

Facing the same issue. Please post the solution if you find any.