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.
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.