Multiple Select on Safari - iPhone iOS 7

I also can confirm that this problem still occur in newer iOS for iPhone versions.

Tested:

- Simulator iPhone 6 - iOS 10.2 (14C89)

- physical iPhone 6s - 10.1.1 (14B100)

iPads with the same iOS versions (Simulator and physical) doesn't have the problems. Regular "single" selects, without the "multiple" attribute, are not effected at all.

Hi,

yes, I have exactly same behaviour, but I don't know now how to solve this. We already send this as a bug to the apple.

Lukas

Having the same issue here. If you come up with a solution please let me know.

Do anyone found some workaround maybe?

Any progress on this?

It's a nasty work around but it solved the weird event handling for me.

Example in jQuery:

var doChange = false;

$('select').on('focusin change focusout', function(e){

switch(e.type){

case 'focusin':

doChange = true;

break;

case 'change':

if(!doChange){

return false;

}

break;

case 'focusout':

doChange = false;

break;

}

if(e.type == 'change'){

// do your onchange stuff

}

});

Yes, same issue with multi select on iPhone 5 + iOS 7

Could anyone with the iOS 7.1 beta confirm if this is still an issue?

Anyone with iOS 7.1 beta is sworn by a NDA to discuss anything about the iOS. So, no one would be able to tell you.

This workaround seems to fix some of the eveny craziness with the SELECT tag, but it doesn't seem to prevent the tag from doing the "after close" unselection of the last tapped item. In a nutshell the select tag is a pretty severely broken in iOS 7 Safari for iPhone/iPod, and that bug that renders multiple selection dropdowns pretty much useless. Someone at Apple got too mesmerized by their new shiny "scrolling wheel" selection meme, and then never actually did any actual testing on it. Does anyone know the ID of the submitted bug to Apple on this one?

Wow, this is catastrophic for my responsive web app. I've been banging my head against the wall for days trying to figure out why my multi-selects weren't playing nice on my iphone despite being fine on my old iPad and desktops. Would also appreciate the bug ID.

There appears to be a solution, its ugly, but it seems to work.

The sequence of events for a multiselect (at least in the simulator) are as follows:-

CHANGE

...

CHANGE

BLUR

CHANGE

Its the final CHANGE event which does the damage.

The solution is to set a flag in the BLUR event, so the final CHANGE is discarded. Record the full set of selected options for each CHANGE event, but on the CHANGE event after the BLUR, reinstate the value recorded by the previous CHANGE event.

The reinstatement has to be via setTimeout(100 milliseconds seems about right) - setting the value straight away is ignored.

This solution has NOT been extensively tested, so far I've only tried it in the simulator. In addition it is likely to be unstable - when Apple fixes the bug, this solution will almost certainly break.

A safer solution would be to replace the multiselects with a custom div based solution - but this looks ugly.

All current solutions were not good enough to fit my needs. The general idea of all offered solutions is to reselect values after closing select. But when you open select again - selected items will be incorrect.

In my project all selected items should remain selected after closing/opening selectbox. Solution is to add fake first option with "Select Options" label, that should not be able to select, and restore selected options after closing select options.

// hack for iPhone 7.0.3 multiselects bug if(navigator.userAgent.match(/iPhone/i)) { $('select[multiple]').each(function(){ var select = $(this).on({ "focusout": function(){ var values = select.val() || []; setTimeout(function(){ select.val(values.length ? values : ['']).change(); }, 1000); } }); var firstOption = '<option value="" disabled="disabled"'; firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"'; firstOption += '>« Select ' + (select.attr('title') || 'Options') + ' »'; firstOption += '</option>'; select.prepend(firstOption); }); }

Someone know if this is solved now? or do we have to wait to a new IOS ver release?

Tks,

It is NOT solved. I just updated my iPhone to IOS 7.0.6 (latest stable release) and the multi-select bug is unchanged in Mobile Safari. Ugh! Shme on Apple for not getting this fixed immediately. The fix has to be trivial on their end, and working around it is horrible.