<select> with multiple becomes unresponsible after changing contents of ngOptions list in IE11

[Obrell86]

There seems to be a couple of issues listed for similiar issues but I just updated to 1.4.8 and still have this issue.

I have two of these in a directive to allow users to move items from one list to the other (both lists are subsets of a bigger list of items, and are filtered so no items can be in both lists).

<select id="multiSelectAvailable" 
ng-model="selected.available" 
multiple="multiple" 
size="{{available.length}}" 
ng-options="e as e[displayAttr] for e in available">
</select>

<select id="multiSelectSelected" 
ng-model="selected.current" 
multiple="multiple" 
size="{{model.length}}" 
ng-options="e as e[displayAttr] for e in model">
</select>

Sometimes when setting the list of items one or both of the selects becomes unresponsive. After changing the contents a couple of times it starts working again. However it could just be a coincidence.

** Edit **
Removed the comment about Swedish characters as that seems to not have an impact.

[gkalpak]

@Obrell86, I can't be sure, but it sounds more like an IE issue than Angular.
Have you tried reproducing this without Angular (i.e. relying to native APIs) ?

If it does indeed only happen with Angular, could you post a live demo (e.g. using CodePen, Plnkr etc) ?

[gkalpak]

Also, have you tried with the latest code on master ?
Do I understand correctly that the issue only presents itself o IE11 ? What other versions/browsers have you tried this on ?

[Obrell86]

Since I've found similar bugs listed here I figured it might be related, I'll try and write up a native implementation.

I've tested in IE11 and Chrome 47.0.2526.106 m and have only been able to reproduce in IE11.

[Obrell86]

Well my native implementation works fine. I guess I could somehow use that instead but I sure hoped this would work within Angular since I won't have any data-bindings and lose a lot of time.

I'm putting together a JSFiddle with a recreation.

[gkalpak]

Just to be clear, I did not suggest you should use a non-Angular implementation in an Angular app.
I was just trying to verify if this is indeed an IE issue or an Angular issue. If it turns out to be the latter, we should definitely fix it.

[Obrell86]

Alright, I have a fiddle up here: https://jsfiddle.net/3e6cv6en/
You can reproduce the issue by selecting an item in the From: select and then select an item in the To: select. In some cases one or both of the multi-select elements will become unresponsible.

[Narretz]

Hm, I can reproduce the issue. Having "Anna" on one side and "Gerda" on the other produces it pretty realiably (after the first time selecting both).