JQM SelectMenu in Panel Crashing Android Chrome

[sombranox]

This is a bizarre error I've finally managed to isolate as happening with jquery 1.11.0+ and jquery mobile 1.4.4+ when you have a select menu embedded inside of a panel visibly.

In android Chrome if you try to open the dropdown in that situation, it will flash the mobile select menu for a second, then crash either the page, causing an "Aw, snap!" message, or else in case of the below example, will crash the entire Android Chrome application.

The weird thing is that if the selectmenu is in a hidden div when the panel is shown and made visible after the panel is completely visible, you can work with it just fine without any crashing. Similarly you can work with select menus not in panels without any problems.

It's only when the selectmenu is in a panel and visible when the panel is made visible that it freaks out.

Here is a jsfiddle fragment that shows this happening if you go to it in chrome on an android phone (it has to be actual phone, emulation in chrome doesn't cause this)

http://jsfiddle.net/sombranox/3sd1kpd3/1/

Opening that page and running it the "test1" dropdown selectmenu works just fine if you click on it.

If you then click "Open Panel" to open the panel, you will see a "test7" dropdown.

Trying to open this one will crash chrome entirely for two phones I have tried this with, both with Android 4 installed.

However, if you open the panel and click "Make Another Visible" it will expose a "test4" dropdown, which will work without problems, because it was hidden when the panel was made visible and is only shown after the panel is open.

So far i have had to do a hacky workaround in my app I'm writing that uses dropdowns in panels to make this work. On the "open" event of the panel, I delay briefly then make all hidden dropdowns visible. And on close, I hide them all again.

It introduces an ugly visual delay to the forms, but it is better than crashing the page or crashing the whole app if they use chrome on android.

Hopefully someone will figure out what is causing this and fix it, because it's very bizarre behavior that took me a few days to track down to this case.

Good luck.

[sombranox]

It apparently does not crash on Android 5 Chrome however, so apparently this is specific to Android 4 and Chrome

[arschmitz]

@sombranox please update your example to use latest code including latest jQuery. There was a similar issue fixed in core recently.

[sombranox]

http://jsfiddle.net/sombranox/3sd1kpd3/2/ (Note the /2 instead of /1) is now updated to use external resources of jquery 1.11.3.min.js and JQM 1.4.5.min.js and it is still crashing on my evo 4g lte android chrome and my co-worker's Nexus 4 android Chrome (which is on android 5.1, so apparently it's not tied only to android 4). My other co-worker with a Moto X and android 5 however does not crash when going to either of these and doesn't seem to have this problem.

[arschmitz]

@sombranox those are not latest please try the git versions not the stable please see our template http://jsbin.com/ofuhaw/1/edit in the contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md

[jaspermdegroot]

I just tested http://output.jsbin.com/zigimu on Android 4.2.2 (Nexus 7 tablet) and it didn't crash.

@sombranox - What specific Android version did you test on and on which devices?

[Ruffio]

On LG G4 Chrome 43 running Android 5.1 I can confirm that it crashes

[sombranox]

@jaspermdegroot Evo 4G LTE with Chrome 43 running Android 4.13.651.4 is crashing the page to the "Aw, Snap!" page using http://output.jsbin.com/zigimu when I open the panel and click on the test7 dropdown selectmenu. However, I notice that that jsbin template is using jquery-1.11.1.js. Should it be using a newer jquery version if this was possibly fixed in recent build? Is there a way to load the latest git jquery into jsbin?

@arschmitz The example you gave used jquery-1.10.1.js so is it the jquery mobile core you meant that needs to use the git or was this fixed in jquery core itself? If it's just the latest git jquery mobile, then I believe the http://output.jsbin.com/zigimu example is using the latest jquery mobile and is still failing (thought crashing to Aw, Snap! instead of crashing the entire chrome app) and so apparently is not fully fixed.

[jaspermdegroot]

@sombranox

Good point. I forgot to change the jQuery link, sorry. I just updated http://output.jsbin.com/zigimu to use jQuery Git build, but now you'll get a JS error. I think that problem is only fixed in our 1.5-dev branch where all test against jQuery Git are green. Testing this with our 1.5-dev branch has no use because in there the selectmenu widget still needs to be updated and is currently broken. I think we have to wait with testing until we merge 1.5-dev in master.

cc @arschmitz

[arschmitz]

@jaspermdegroot yup i tried doing the same thing yesterday and ran into the same issue.

[apsdehal]

As selectmenu is merged into 1.5-dev, I can confirm this has been fixed. Updated bin: http://output.jsbin.com/kiremu/1