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.

Short URL: http://cssn.in/ja/044

 

Post filed under: html.

Skip to comment form.

  1. GDmac says:

    fyi – IOS 6.0.1 still has the problem. (tested x-mas 2012)

  2. Alexander says:

    FYI – IOS 7.0.3 still has the problem. (10 Nov 2013)
    Insane that Apple has not fixed this problem yet.

  3. Steve Jones says:

    I have seen reports of this problem since 2007 and still not fixed in the latest 7.0.3. Seems the option that is shown in the middle is inverted when the selection wheel closes. If its selected its removed, and if its not selected then it is forced selected on closing. iPhone even fails on the W3 standards example. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select Any work arounds please?

  4. Steve Jones says:

    Opps, should have given the multiple select sample to show the IOS bug http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Leave a comment