iOS 9.2: Select List (multiple) incorrectly firing change event and setting value to first option on focus. (safari and chrome)

Question

I am having issues with a multi select list in iOS browsers (chrome and safari). In my case I have an angular model binding on the select which is firing watchers and updating the model value as soon as I focus on the select. I believe this is a bug in iOS 9.2. Here are the specific symptoms:

Chrome:

As soon as the select element is focused the "change" event is fired and the value is set to the first item, even though the UI shows no selections. After selecting a different option from the list and closing the iOS overlay, the value changes to the correct value. If you then focus on it again the "change" event is again fired and the value of the first option is again added. This time closing the overlay leaves the first item selected.

Safari:

As soon as the select element is focused the "change" event is fired and the value is set to the first item. In this case the UI in the overlay shows no selections, but the text in the original select now shows the first item as selected. Actually selecting the first time, sets the value to null even though the UI clearly shows you have now selected the first item. As you focus and blur the select it will continue to toggle the inclusion of the value of the first option in the list. Basically in addition to the incorrect addition of the first item to the value on focus, this browser also loses sync between the value and the UI.

I've created a very simplified jsfiddle to demonstrate this behavior.

http://jsfiddle.net/u922mnvv/4/

HTML

<select name="test" multiple>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
  <option value="test4">test4</option>
  <option value="test5">test5</option>
  <option value="test6">test6</option>
</select>
<div>
  Log:
</div>

JS (just for logging the events and values)

$('select').change(function(event){
    $('div').append('<p>change:'+$('select').val()+'</p>');
});

Is this a known issue? Are there any work-arounds?

Answer 1

I had the same issue. This answer helped to resolve it:

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.