html - Mobile Safari multi select bug

Question

If found a really annoying bug on the current (iOS 9.2) mobile safari (first appearing since iOS 7!)

If you using multi select fields on mobile safari - like this:

<select multiple>
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

You will have problems with automatically selection!

iOS is automatically selecting the first option after you opened the select (without any user interaction) - but it will not show it to you with the blue select "check".

So if you now select the second option, the select will tell you that two options are selected (but only highlighting one as selected)...

If you now close and open the select again, iOS will automatically deselect the first value - if you repeat, it will be selected again without any user interaction.

Thats a really annoying system bug, which is breaking the user experience!

Answer 1

Solution for safari multi select bug and Empty and Disabled option tick related issue:

<select multiple>
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>