<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).

[Obrell86]

Good to know it's not just a local occurrence. I've put the story for this on hold and will pick it back up later on.

Time for holiday vacation.

[johnfoley3]

I've recently ran into this issue as well, very frustrating. My current workaround until a better solution is found, and hopefully this inspires someone, is to change the CSS of the select element in a non-passive render way. For example:

function ieSelectElementFix() {
        var fooSelect = angular.element(document.getElementById("fooSelect")),
            fooSelectWidth = parseInt(fooSelect .css("height"), 10),

        fooSelect.css("height", "" + (fooSelectWidth + 1) + "px");

        $timeout(function() {
            fooSelect.css("height", "" + (fooSelectWidth) + "px");
        });
}

A better way on stack overflow was to remove and add the DOM element, but that causes a blink effect when this way a small tremor occurs, but usually too fast to catch if you're not looking for it.

It does seem to be an IE issue, but if Angular can work a solution in, then that makes it all the better.

[Narretz]

@johnfoley3 Your solution doesn't seem to work for this particular problem, unfortunately. What works for me is doing foo.text(foo.text()); on the first option of a frozen select.
The underlying cause though seems to be that we internally reuse option elements when the option collection gets updated:

angular.js/src/ng/directive/ngOptions.js

Lines 613 to 614 in 0348347

	// The next element is the right type so reuse it
	element = current;

That means we just update label, text and selected. It looks like this makes ie choke.

[dannycsng]

@Narretz I have tackled this similar issue for quite a while. I have tried 1.4.1, 1.5.0 with xeditor. The first time two options list loaded with data and right away the selection become in-responsive in IE11. If this has been fixed, please let me know what version of Angular 1.?.? is. Thank you.

[Narretz]

@dannycsng The fix is available in 1.5.5. I can't guarantee that it fixes all frozen select issues, because they are untestable and sometimes can't even be reproduced systematically manually.

[dannycsng]

@Narretz I will definitely try this version. I find a strange behavior where if I touch the DOM on the font of the options list, it opens up for selection. Then, it freeze again. It seems a workaround like johnfoley3 to touch the DOM may work although it is a hack. Your opinion?

[dannycsng]

@Narretz I am sorry to report that it works partially in version 1.5.5. It opens up for selection when first loaded. Then, it freeze up again after select and move from one list to another. Also, touching the DOM works sporadically too. Any opinion from anyone?

[Narretz]

@dannycsng please open a new issue with a minimal demo that shows the problem