PhoneGap / Sencha Touch: WebView render issue on hide SoftKeyboard

Question

Software

I'm using Sencha Touch (2.1.1) and PhoneGap (2.5.0) to develop an application for Android and iOS.

My problem

There are some views with input fields (Ext.field.Text and Ext.field.Email) at the bottom of a container. When you tap an input field, the Android SoftKeyboard shows up and pushes the entire view to the top so that the input field is not hidden by the keyboard.

Now when you hide the keyboard (by pressing the Android hide button or by tapping anywhere besides the input field) the WebView does not always snap back until you tap the WebView again.

Hardware

Currently I'm facing this problem on a Nexus 4 (Android 4.2.2). It all works fine on iOS (iPhone 4/5) and even on the Sony XPERIA Go (Android 4.0.4).

Screenshots

Here are some screenshots of the problem:

I've already figured out that I could change Android's windowSoftInputMode to adjustNothing, but then you wouldn't see the typed text until you hide the keyboard...

Update

Some comments to the 3 mitigations by Sergio.

The first solution seemed to be the best to me. It only affects the Android project and does not bloat my JS (e.g. if Ext.os.is.Android ...) or iOS code. Unfortunately my Nexus 4 still adjusts on focus and does not revert on blur if I set windowSoftInputMode as described...

Second solution sounds more complex. I'd need to move every (bottom aligned) component on focus and revert on blur, if OS is Android. While this is definitely possible, there might be another problem: the user can hide the keyboard with the device's back key without removing the input's focus (blur is not fired). So I don't think that this is a suitable solution.

The third solution is appropriate for number inputs. But writing a virtual keyboard for text input is a tough task: The key alignment differs between locales (e.g. y and z are transposed on German keyboards) and we won't match the user's expectations when offering an alternative keyboard (swipe input, suggestions, ...).

Don't get me wrong, I'm thankful that you shared your mitigations with me! But I am not fully satisfied yet.

Answer 1

Sencha Touch 2.2.0 fixes the issue!

I've finally found a suitable solution. On April 15, Sencha released version 2.2.0 of their Touch framework. After upgrading from 2.1.0 the layout reverts back fine!

To save other's time: please note that Sencha Cmd 3.1.x (which is required for 2.2.0) does not work with Ruby 2.0.0. The build process will fail with some weird error messages. Using 1.9.3 instead works fine.

Update #2: Sencha Touch 2.2.1...

Well.. I've just upgraded to Sencha Touch 2.2.1 and the issue is back! So if you're planning to use the latest Sencha Touch release, please mind that the keyboard might crash your layout :/

Answer 2

A few months back, I spent a ton of time trying to figure this issue out. Tried out a bunch of stuff, sifted through Google/StackOverflow.

Ultimately I wasn't able to do exactly what I was looking for; it doesn't look like we have enough (easy) control over the keyboard from Sencha Touch/PhoneGap for a lot of things (on top of the keyboard position, we also have basically 0 control over what the "return/go/ok" button actually does, which varies between Android versions, especially when it's a number field.) However:

Mitigation 1: windowSoftInputMode="stateUnspecified|adjustResize" will cause the keyboard to cover the input, but once the user starts typing, the screen will adjust to show the input right above the keyboard, and things will revert as desired upon input blur. This is at least the case for my Samsung Galaxy S2 (2.6), Samsung Galaxy S3 (4.2), and Kyocera Rise (4.0).

Mitigation 2: One solution I implemented was, on input focus, changing the position of the inputs to guarantee that they'll be above the keyboard. Upon input blur, the input will change to its original location. This is not ideal because you'll often see the inputs move to the new location before the keyboard covers it up, so it looks pretty janky.

Mitigation 3: For number fields, I used a modified version of https://market.sencha.com/extensions/numpad that created a virtual keyboard and set it to "showBy()" the required input. That ensured that the keyboard never covered up the input and the app didn't have to deal with any re-positioning of the screen (screenshot below).

Problem with mitigation 3: The problem here is that it is only for number fields, and I was not able to find any standard keyboard plugins for Sencha Touch (my app is number focused so that limitation was acceptable.) That said, I'm sure you could spend a few days using the numpad plugin as a core to build a virtual keyboard that could work in a similar way.

Sorry for the lack of a perfect solution. I hope this is helpful!