Input in Android: Issues with newest version of KendoUI Mobile styles.

[RodEsp]

I think I just encountered a strange bug. I am running on both the Android 4.0.3 Emulator and an Android 4.0.3 Device (Samsung Galaxy S II).

If I initialize my application like so:

app = new kendo.mobile.Application($(document.body));

<input> html elements seem to not function. As in I can not edit text in text boxes and buttons don't fire any bound click events.

However, If I initialize the application in the following manner:

app = new kendo.mobile.Application($(document.body), {platform: "android"});

then I have no problems at all. Obviously, I would like to use the first initialization for cross-platform styling. 

This does not happen if I use the 2012.1.515 version of Kendo's styles, <inputs> will work either way with them.
I would also like to use the newer styles since I think they look better on the android platform.

I have already looked at this documentation: http://docs.kendoui.com/getting-started/mobile/forms
But using the css at the bottom has had no effect.

[Kamen Bundev]

Hello Rodrigo,

I've tried to create an app and it did work in both cases in the browser. Can you send a sample page where I can check what is going on? Also please specify if you're running it in the browser, in PhoneGap and if yes - which version of PhoneGap.

Regards,
Kamen Bundev
the Telerik team

[RodEsp]

Hi Kamen,

As I specified, I'm running it in the Android Emulator and a Samsung Galaxy S II (SGH-T989), both using Android 4.0.3.
I am using Phonegap 1.9.0 and I'm building my app using Phonegap Build.

It does work fine in a browser, but not as an app/webview on the phone/emulator.
I know there was a bug in Phonegap where inputs didn't function properly but that was fixed and it was only broken in Android 4.1 not 4.0.3.
source: https://issues.apache.org/jira/browse/CB-1017

What I'm wondering is, why does it work just fine with the Q1 kendoui styles (kendo.mobile.all.min.css) but is broken with the Q2 versions of the styles?

[Kamen Bundev]

Hello Rodrigo,

There is a specific CSS style set on the inputs in all Android 4.x browsers to avoid the double inputs issue that can be seen in all Androids. My guess is that the same PhoneGap bug that you posted is triggered by this CSS style in other 4.x environments - there were reports that upgrading to 2.0 fixes the issue. However if you insist to stay on 1.9, you should be able reverse it with this rule, just make it sure it is added after the Kendo Mobile CSS file /or you can use !important instead/:
.km-android4 input
{
    -webkit-user-modify: read-write;
}

Let me know if one of the two possible workarounds helps.

Greetings,
Kamen Bundev
the Telerik team

[RodEsp]

Thanks for the prompt reply Kamen,

Upgrading to Cordova 2.0 does fix the issue, but applying that css rule does not.
I suppose I will just have to wait until PhoneGap Build supports Cordova 2.0.

Is there a plan to fix the double inputs bug without a css "hack" later on?

Thanks for all the work you do and all the questions you've answered!

[Kamen Bundev]

Hi Rodrigo,

Unfortunately no - this is an Android native browser bug and nothing else fixes it cleanly - there are two methods with almost equal bad effects.

Our Icenium beta 2 will support PhoneGap 1.7 and 2.0, you can give that a try. I'm using it for testing iOS and Android apps.

All the best,
Kamen Bundev
the Telerik team

[RodEsp]

Hi Kamen,

That's great to hear. I've been following Icenium's development for the past 2 months and I'm extremely excited to see it coming along so well.

Thanks again for the help.