Andrew Hall


Another iOS 8 dropdown issue

Today I was investigating *another* iOS 8 issue on Safari with select/dropdown elements (yesterdays bug here). 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.

Just like yesterdays bug, it doesn’t happen on iPad in iOS 8 and also doesn’t happen in Chrome.
This issue has been reported to Apple here: https://bugs.webkit.org/show_bug.cgi?id=137067

Leave a comment or tweet me