Select menus don't open in latest Firefox mobile 4.0b3 #1626

Closed
toddparker opened this Issue May 13, 2011 · 8 comments

Projects

None yet

4 participants

@toddparker
Contributor

When you click on a custom select, the button activates, but the menu isn't shown. Seen on Firefox mobile 4.0b3 on Android 2.2

Tested this is the latest build:
http://jquerymobile.com/test/docs/forms/forms-selects.html

@marcoos
marcoos commented May 13, 2011

I tried to reproduce this bug in Firefox Mobile (Fennec) 4.0.1 (4.0b3 being 3rd beta of 4.0 is hardly latest ;-)) for Mac and the menu did show up, but half of the times I try to open it, its position is wrong:

http://img405.imageshack.us/img405/2824/zrzutekranu20110513godz.png

@toddparker
Contributor

Odd, I hit the check for updates button and it said it was up to date. Not sure what to do there. Anyway, this needs some work. If you have any ideas on how to patch this up, please post it here or do a pull request. Thanks!

@marcoos
marcoos commented May 13, 2011

So now I opened it in a recent WebKit nightly and clicked "Alabama" just before the Placeholder options header. It opens the dialog-like select for the first/third/fifth/etc. time, and the "normal" (iPad-like) select the second/fourth/sixth/etc. time.

The same thing happens in Fennec (plus the above-mentioned mispositioning).

@marcoos
marcoos commented May 13, 2011

Another screenshot, this time from my iPod (1st time it opened the dialog, the 2nd time I got this):
http://imageshack.us/m/705/2999/zdjeciesh.png

So my guess is that the code that tries to decide whether to open a long select element as a dialog gets confused.

@marcoos
marcoos commented May 13, 2011

And indeed, it does.

In both Gecko and Webkit, every other time in jquery.mobile.forms.select.js in the open() function this:

            menuHeight = self.list.parent().outerHeight(),

is 0, and when it is zero, this condition is false:

        if( menuHeight > screenHeight - 80 || !$.support.scrollTop ){
@scottjehl
Contributor

I think there's another issue at play here. Some browsers need the opacity of the select to be greater than 0 (however slightly) for it to work. I'll try and change it back to 0.00001, but that may make the select's text appear in certain browsers, and require another workaround :/

@scottjehl scottjehl pushed a commit that closed this issue May 24, 2011
scottjehl Changed the hiding mechanism for invisible native selects so that the…
…y work in Firefox Mobile. Fixes #1626. Tested on the following platforms: Mobile Firefox on Android 2.2, Firefox 3.6 and 4.x Mac, Chrome on Mac, Internet Explorer 7 and 8 - Desktop, Windows Phone 7, Safari desktop, Android 2.2 webkit, iOS 4 iPhone, BlackBerry 5, BlackBerry 6, iOS 4 on iPad, Opera Mini & Desktop on Mac
198ca91
@scottjehl scottjehl closed this in 198ca91 May 24, 2011
@dereuromark

I have the same issue with Chrome (latest version). multiple=multiple selects seem to be broken. everything else works fine.

@dereuromark

ok, seems to be the case only for native themes (using nativeMenu = false it works!).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment