REGRESSION (iOS 8): <select> values are not properly updated in a form with multiple <select>s

• Component: Forms
• Status: NEW ---

[Andrew Hall]

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;
                    window.setTimeout(function(){
                        $(this).get(0).selectedIndex = curVal;
                        $(this).click();
                    }.bind(this),50);
});

However, you need to be wary – this bug does call the change event of the select when incorrectly selecting the value

[Radar WebKit Bug Importer]

<rdar://problem/18477482>

[Reid Lyons]

I can recreate this in iOS 9. Would you increase the priority of this issue?

[Michael Trinque]

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.

[Michael Trinque]

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.

[Walt]

+1
please fix

[Chris Rebert]

Created attachment 271727 [details]
Testcase demonstrating the problem

[Chris Rebert]

Created attachment 271728 [details]
Screenshot showing the problem

Still reproduces in iOS 9.2.1
Here are a testcase and screenshot to clarify.

[sladex]

Still experiencing this bug in iOS 10.

[Erik Ostrom]

Still experiencing this bug in iOS 13.

A side effect is that when the display switches to the first option, a change event is sent, as though the user had committed a change to the first element. If the user closes the dropdown without changing their selection, another change event is sent.

[kenny]

I created this issue before finding this one for ios 13 I've seen production errors with this exact bug

https://bugs.webkit.org/show_bug.cgi?id=216077

Has link to codepen demonstrating the problem.