Bug 137067 - REGRESSION (iOS 8): <select> values are not properly updated in a form with multiple <select>s
Summary: REGRESSION (iOS 8): <select> values are not properly updated in a form with m...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 9
Hardware: iPhone / iPad iOS 9.2
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2014-09-24 07:50 PDT by Andrew Hall
Modified: 2017-11-07 23:50 PST (History)
7 users (show)

See Also:

Testcase demonstrating the problem (679 bytes, text/html)
2016-02-18 20:32 PST, Chris Rebert
no flags Details
Screenshot showing the problem (81.78 KB, image/png)
2016-02-18 20:35 PST, Chris Rebert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andrew Hall 2014-09-24 07:50:43 PDT
We have now discovered *another* iOS 8 issue on Safari with select/dropdown elements. In order to reproduce the issue, you need a form that contains multiple dropdowns

1)	Set the value of one drop downs to be 2nd item
2)	In another  dropdown, select the 3rd item, but do not click done
3)	Click back on the original <select> element from step 1.

4)	The 3rd item will be displayed as selected in the first element, not the 2nd as you set in step 1 – but in the selection box the correct value will be shown

When moving from one dropdown to another, it seems to set the index of the newly selected dropdown to the index of the dropdown that you have clicked away from.
You can fix this with jQuery by intercepting the change event and reselecting the correct value.

$('select').bind('focus', function () {
                    var curVal = $(this).get(0).selectedIndex;
                        $(this).get(0).selectedIndex = curVal;

However, you need to be wary – this bug does call the change event of the select when incorrectly selecting the value
Comment 1 Radar WebKit Bug Importer 2014-09-26 21:53:09 PDT
Comment 2 Reid Lyons 2015-10-20 08:32:56 PDT
I can recreate this in iOS 9. Would you increase the priority of this issue?
Comment 3 Michael Trinque 2015-11-14 10:20:38 PST
I find the following to be a better solution provided that you are not making use of disabling selects in your application (though obviously one could alter the code below to account for that as well):

var selects = $('select');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
   selects.blur(function() {
      selects.prop('disabled', false);
   }).focus(function() {
      selects.not(this).prop('disabled', true);

I'd like to point out that this has been open for over a year and has yet to be either acknowledged or fixed. The code causing this bug *must* be extremely sloppy, something to the effect of "set whichever select box is focused to the index of the picked option" and not the sane "set the select box *associated with this option* to the option's index". I'm glad the iPad/iPhone is getting thinner and all... great; lets see some improvement on the software side of this 100bn+ empire.
Comment 4 Michael Trinque 2015-11-14 16:51:17 PST
In fact my solution did *not* work. We've instead used this:

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    selects.blur(function() {
        selects.css('display', '');
    }).focus(function() {
        selects.not(this).css('display', 'none');

This prevents any possibility that the user can tap another select until after completing their current selection. While painful, as there has been no official attention to this user I suppose it will have to do.
Comment 5 Walt 2016-02-16 05:21:27 PST
please fix
Comment 6 Chris Rebert 2016-02-18 20:32:32 PST
Created attachment 271727 [details]
Testcase demonstrating the problem
Comment 7 Chris Rebert 2016-02-18 20:35:30 PST
Created attachment 271728 [details]
Screenshot showing the problem

Still reproduces in iOS 9.2.1
Here are a testcase and screenshot to clarify.
Comment 8 sladex 2017-11-07 23:50:26 PST
Still experiencing this bug in iOS 10.