Multiple Select on Safari - iPhone iOS 7

It appears the multiple select element is broken for the iPhone on iOS 7 in Safari and Chrome. (http://jsfiddle.net/ryborg/UjJ87/)

When the user expands the option list and clicks the Done cta to collapse the option list, the browser does some weird stuff.

If no option is selected, it selects the first option in the list.
If one option is selected, it deselects that option.
If multiple options are selected, it deselects the last option to be tapped.
If an option previously selected is deselected, it reselects the option.

Looking at the iPhone console from Safari 6 on my Mac shows that a change event fires for the select element when the option list is opened and again when it is closed. The desktop browsers are only firing change events when the options are (de)selected.

This is not happening on iPhone 3GS running iOS 6 nor on iPad 2 or iPad Mini running iOS 7.

Can anyone else reproduce this issue? Any suggestions on how to solve it?

iPhone 5, iOS 7.0.3

Posted on Nov 11, 2013 7:46 AM

20 replies

Mar 6, 2014 2:36 PM in response to ryborg

This is ridiculous Apple... this problem is a very basic one AND affects usability on a large number of websites. From what I have read from a quick search this has been happening for quite a while with a few version releases since. Get it together and get this corrected already.

To he honest I came across this problem before on a few websites and assumed the site itself had bad coding. Well, now I am using a multiple select dropdown in my own site which leads me here and multiple other sources on the web complaing about the same problem. It is not the coding of the people it is the coding of IOS.

Mar 11, 2014 11:11 AM in response to ryborg

This has somewhat been fixed with 7.1... somewhat. I have opened a bug report from a few days ago if anyone cares to check it out or add their own comments. The # is 16272007.

Using the following as an example (no values have been set for simplicity) :

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

<option>Option 4</option>

<option>Option 5</option>

</optgroup>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

<option>Option 4</option>

<option>Option 5</option>

</optgroup>

</select>

Item selection now correctly works and the item list will be correct, HOWEVER, you are now able to select the optgroup titles which is not correct. In the example above I can actually select 'Computer 1' which will crash Safari. If I select the other group title, 'Computer 2', my item list changes to 'Option 5' rather than displaying the number of items selected.

Now, I am not sure if they are allowing group titles to be selected on purpose or not. If you are able to select them as it is now I would think all items in that group would be selected/deselected which is not the case, however, that would be a nice functionality to add. Either way it does not work as expected.

It does appear that someone at Apple looked into this issue as part of the problem was corrected just not in the sense I listed above when using groups.

Mar 11, 2014 11:30 AM in response to pongohops

Additionally I noticed you can select disabled options as well...

<option disabled="disabled">this is disabled</option>

You can select the above option in the list. It is obviously disabled, but can still be selected... another part of this functionality which is wrong.

Apr 22, 2015 7:31 AM in response to ChrisJ4203

Is there a reported bug for this issue on Apple, can you provide the proper link to be able to confirm that Apple is aware? Thanks.

Oct 24, 2016 1:31 PM in response to ryborg

Still happens with iOS 10.1 After 3 years. Do they just not care about software quality?

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

Multiple Select on Safari - iPhone iOS 7