html - <select> not working in Phonegap app on Android 2.3.3

Question

I'm working on Phonegap app for Android and iOS. Most of the stuff works pretty well but I'm experiencing a problem with <select> tag. It's enhanced with jQuery mobile and on that version of Android when the appropriate div is clicked / tapped the options are not showing up. They show up when I do two clicks / taps:

1. on a div containing <select>
2. on a area above the div

In that scenario options show up and when selected change event is fired and code bind to it is executed.

I found these two android issues: http://code.google.com/p/android/issues/detail?id=10280 and http://code.google.com/p/android/issues/detail?id=6721

I have tried the workarounds mentioned there but they don't change anything. I still have to do two clicks but it's not the behavior I'm after. I only need one click.

Issue exists only on Android 2.3.3 and I think on older versions too. On iOS and newer Androids everything works perfectly fine.

I'm struggling with this issue whole day and tried everything.

Any help, tips would be heavily appreciated. Thanks.

Answer 1

Did You try adding data-native-menu="false" attribute to the select menu.

Example:

<select name="gender" id="gender" data-theme="b" data-native-menu="false" >
    <option value="">Please specify ...</option>
    <option value="option1">Male</option>
    <option value="option2">Female</option>
    <option value="option3">Undisclosed</option>
</select>