Input error with keyboard on Galaxy S2 using jQuery Mobile and Phonegap

Question

We are developing a mobile web app in jQuery Mobile 1.0.1 and Phonegap 1.4.1 and have run into issues with the keyboard on the galaxy s2.

We have a menu which slides out and contains a search input:

<input type="search" placeholder="Search..." name="search" id="menu_search" data-role="none" />

When we tap in the input so that it gains focus, the keyboard opens but does not allow us to type anything in. I guess a clue here is that its giving us a regular text keyboard and not the search keyboard (which has a magnifying glass as the enter key)

If we focus the input when the menu opens: $("#menu_search").focus() - The search keyboard is open when the menu displays and we are able to search BUT as soon as we tap in the input the keyboard changes to a regular keyboard and we a not able to type anything.

Another clue is that while typing in the keyboard the auto-predict works but when tapping on the correct option only a space is added to the input and none of the other characters.

We have tried a bunch of other attribues on the search input to no avail:

<input type="search" placeholder="Search..." name="search" id="menu_search" value="" data-role="none" autocomplete="off" autocorrect="off" autocapitalization="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" style="-webkit-appearance:searchfield;" class="ui-autocomplete-input" />

This all works fine on a HTC Desire running 2.2 and a desire running CM7 (Android 2.3.7)

We even tried changing the input to a textarea but this did pretty much the same thing :(

I also tried:

$("#menu_search").live('focus',function(event){
   event.preventDefault();
});

to see if that would prevent it from changing keyboards but no luck either.

We do however have another search input elsewhere in the app which works fine, the only difference being that the other search is in a "propper" page: data-role="page" and the menu is outside of all of the other pages and in its own just set to hidden initially.

Please help, im crying blood atm!

Answer 1

You probably have

-webkit-user-select: none;

In your CSS somewhere. If you enable text selection for inputs

input, textarea { -webkit-user-select: text; }

it works again!