Mobile Safari multi select bug
Solution 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>
Add a disabled and hidden optgroup before the real options.
Solution 2
After a long research I found the following (not most beautiful) but working solution:
The trick is to add a empty and disabled select option at the fist position:
<select multiple>
<option disabled></option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
This will prevent iOS from automatically selecting the first option and keep the selection values right and clean!
The empty option is not visible and the count of the selections is correct.
Related videos on Youtube
![Laurenz Glück](https://i.stack.imgur.com/cPFTT.jpg?s=256&g=1)
Laurenz Glück
Javascript, React & React Native, iOS & Objective C, PHP & Symfony & Zend Framework, Pimcore
Updated on June 18, 2022Comments
-
Laurenz Glück about 2 years
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!
-
crackmigg over 8 yearsI filed a bug report at apple, lets wait how this resolves.
-
Laurenz Glück over 8 years@migg the bug is already appearing on iOS 7 which was released two years ago... Hopefully apple finally get it fixed soon :/
-
crackmiggBug report was marked as duplicate of an open ticket that I cannot view.
-
-
Force Hero about 8 yearsA tick still appears when you click at the top of the list
-
user3336882 almost 8 yearsAdding <optgroup></optgroup> before (or wrapping) the options also fixes the issue. This also prevents a tick from appearing when clicking. An empty line is still visible, probably reserved for the optgroup label attribute value.
-
Adnan over 7 yearsThe previous solution from @tejal-raval is better.
-
Rain over 7 yearsit's work for me, and I think this is a best way, thank you
-
Ryan Hamblin over 7 yearsis there any way to just show/hide the "0 items" label on the mobile view? I have an issue where I have multiple options in two select lists that are effected by one another. When I "Add" options to the second list, it doesn't show any indication of whether or not there's anything in it.
-
Anky over 7 yearsAny update on this? as using optgroup leads my mobile application to crash.
-
Alex over 7 yearsStill an issue for me (iPhone 7, latest version of iOS 10). What a pain in the ass.