Weird behaviour with optgroups in iOS6 Safari

So recently the company I work for has been getting quite a few complaints on our location dropdown randomly (un)selecting country locations in iOS6 Safari. Thinking at first it may be something to do with our code I quickly created a reduced test case that stripped everything away except for the select in question and the behaviour persisted.

If you open the test case in iOS6 Safari!, select a few locations and scroll those selections out of view then scroll back it will randomly select/unselect other items you never touched. It will also happen if you unselect a few items then dismiss the select and reopen it, some of the old ones you unselected will be re-selected again. Check out the video below to see the bug in action.

Optgroups seem to be the culprit

On our search box we have a few multi selects but the difference between them and the locations one is that location has a series of optgroups. Optgroups are what causes this weird behaviour to happen, if I strip them out this bug goes away. Check out the third select in the test case to see the fix.

<select multiple="multiple">
    <optgroup label="Options">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
</select>

The above HTML will cause the issue as long as you can scroll some of the items out of view or (un)select some items dismiss then open.

Solution

The only solution I could come up with is to avoid optgroups and use a disabled option to create the section titles. This isn’t the most ideal solution but works in the meantime.

<select multiple="multiple">
    <option value="1" disabled>Options</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

If you know of a better one please let me know. I’ve filed a bug with Apple and have put it in the Open Radar tracker so people can see it.

[link href=”http://cssn.in/ja/044″]