Problems with native select menus

[adammessinger]

The new option to use native select menus with data-native="true" works great in Google Chrome and the desktop and mobile versions of Safari. In testing with the documentation/demo page for select menus, I've found the following problems in other browsers:

• Firefox 3.6 (desktop): The first click on a native select reveals the drop-down menu of options, but choosing one doesn't change the text of the styled button. Subsequent clicks on the button do nothing.
• Firefox Mobile for Android: Tapping the styled button of a native select switches it to the "active" state, but doesn't show the menu of options.
• Opera Mobile 10.1 for Android: Works, but the styled button retains the active state after a choice is made.
• Opera Mini 5.1.22460: Selection works, but the styled button's appearance is a combination of a non-native select and a native select (double text, looks pretty weird). It also retains the active state after a selection is made.
• Default Browser for Android 1.5: Same problem as Opera Mobile 10.1.
• Default Browser for Android 1.6: Same problem as Opera Mobile 10.1.
• Default Browser for Android 2.1: The page fails to load.
• Default Browser for Android 2.2: Works fine, but page scrolls to top after a selection is made from the menu of options. Could be disorienting and annoying on longer forms.
• Default Browser for Android 2.3: Same problem as Opera Mobile 10.1.

[toddparker]

Thanks for the detailed testing Adam. We just tagged this as critical.

[toddparker]

Make this a blocker

[adammessinger]

Corrected a typo in the bug report: last test result should have said "Android 2.3".

[scottjehl]

setting opacity to slightly greater than 0 fixes native selects in Firefox Mobile. At this point, the critical issues mentioned in 897 appear to be resolved. Closed by 2061b5b.

[scottjehl]

My recent commits should take care of all issues above, with the exception of Opera Mini, which I'm unable to test right now. For that reason, I've reopened this bug.

If we could do some testing tomorrow, that'd be great! Thanks.

[scottjehl]

added a workaround for the selectmenu plugin's nativeMenu in Opera. Opera browsers improperly support opacity on select elements, either hiding the menu button but not its text (in Mini), or hiding the text but not the button. Either way, it makes our hidden-select trick look really bad, or unusable. This workaround adds a class to the select in Opera, and makes the native menu visible. In the case of a false positive, that's not a bad outcome. Closed by b464b1b

[morongo]

it can be reproduced when you insert the page div inside the form tag and you are using native select ;)

[toddparker]

@morongo - I'm not sure we can/want to support having a form wrap across multiple pages. That could lead to a lot of edge cases that would be hard for us to manage so we'd suggest have the form tag within the page wrapper.