Search code examples
androidcordovaandroid-webviewcrosswalk-runtimecrosswalk

Disappearing soft keyboard in Android app

I have an unusual problem with my Android app. Whenever I focus an input field on a webpage, the soft keyboard appears and immediately disappears.

The app integrates Crosswalk for the browser functionality, though I want to say this used to happen when I used WebView previously.

This is a screen recording of the problem:

Disappearing soft keyboard

It seems to be pushing up or resizing the HTML to accommodate the soft keyboard, but failing for some reason.

Does anyone know why this happens and more importantly, know how to fix it?

EDIT: I've found that if I add android:windowSoftInputMode="adjustPan" to my AndroidManifest.xml file, the problem does not happen. Setting it to "adjustResize" makes it always happen.

Would still love some help if anyone knows the answer :)

Solution

  • The solution to this is a workaround to an Android quirk (of which there are many). From what I've read, this does not happen on iOS, but I have not tested it to confirm.

    The problem is when the soft keyboard appears, it triggers a window resize. When you are working with a responsive website, as I am, you are likely to have code that handles resizing. When the keyboard appears, a window resize occurs and the keyboard disappears due to custom resize code.

    Solution 1:

    The solution is to rewrite resize events to be orientationchange events. While this isn't an ideal situation, if an app is the only target, then it should be fine.

    To clarify, change from (using jQuery):

    $(window).resize (function ()
{
    // Code on resize
});

    Change to (using jQuery):

    $(window).bind ('orientationchange', function ()
{
    // Code on screen rotation
});

    I am not sure of the browser support for orientationchange since it's not available on http://caniuse.com, but I can say that it does work with the current version of Crosswalk (19.49.514.4).

    Solution 2:

    An alternative solution suggested by chrisdew at https://stackoverflow.com/a/9229672/3509051 suggests "adding a listener to the input's focus event which disables reacting to resize events for 0.5s.". This should also work if you are happy to have a 0.5s delay whenever an input is focused.