jquery mobile, error with select menu in Android with Chrome version 50

Question

I have updated my Chrome browser to last version and I have the following problem:

When I select an option of a select menu it does not appear selected, I repeat the process of the selection and then it is selected OK. If I try to select other option it happens the same, first time bad, second time OK. It is happening since I have update to version 50 of Chrome, with previous version 49 it worked OK.

I am using a Huawei Y5 with Android 5.1.1, it happens the same with a Nexus with Android 6.

The version of jquery mobile that I have is 1.4.5

It seems only happens with Chrome version 50 in Android, in desktop works fine. In the browser that Huawei has, works OK.

To test this problem is easy, just go to the demo of select menu of jquery mobile:

http://demos.jquerymobile.com/1.4.5/selectmenu/

One important thing, in previous versions of jquery mobile works fine, examples:

http://demos.jquerymobile.com/1.3.2/widgets/selects/

Is there any way to resolve this problem? Any help would be appreciated.

Thanks in advance,

Félix.

Answer 1

I have to question the logic behind JQuery Mobile hiding the toolbars on select element focus by default. The native browser select elements overlay the page in their various special ways, and even the non-native select popup (which you get when specify the data attribute data-native-menu="false" in html or nativeMenu: false in the selectmenu options) is absolutely positioned as a dialog. This means that the toolbars really do not intrude on the real-estate given to the selectmenu options as they'll always overlay everything including the toolbars. To me, this makes the code from line 12664 - 12692 commented as: this hides the toolbars on a keyboard pop to give more screen room rather unnecessary for select elements.

Workaround/solution: thankfully jQuery-Mobile does nicely allow you to override this setting in your header/footer with the data-attribute data-hide-during-focus - simply set this to:

data-hide-during-focus="input, textarea"

and it won't try to hide the toolbars anymore when a select element gets focus.

i.e. simply change your header from this:

<div data-role="header" data-position="fixed" data-tap-toggle="false">
  Header
</div><!-- /header -->

to:

<div data-role="header" data-position="fixed" data-tap-toggle="false"  data-hide-during-focus="input, textarea">
  Header
</div><!-- /header -->

... and the same goes for the footer.