Angular.js: Bug. Select ng-options with multiple doesn't work IE10/11 when next to each other.

[wawyed]

There seems to be an issue in IE10/11 using select with multiple attribute. The issue only seems to be happening when you have more than one select in a page. The unexpected behaviour renders all of the selects unresponsive minus the last one. It would appear to be a rendering issue, since if you toggle the visibility of the element it works as intended.

Here is a plnkr to reproduce the issue: http://plnkr.co/edit/E1asWesEj90OqAf5RIt2?p=preview

[Narretz]

That was difficult to debug ...
Turns out IE(11) has a problem with this line where the label property is assigned:https://github.com/angular/angular.js/blob/v1.4.0-beta.6/src/ng/directive/ngOptions.js#L513

Previously, the whole template cloning / assigning was wrapped in jqlite. I guess we cannot simply skip the label assignment - theoretically it should be set to the text always, but I don't know if that works in all browsers.

The problem is that currently the bug appears regardless of which way the label is set: vanilla, $.prop, $.attr

[Narretz]

This is a crazy bug. It only happens if the first select is wrapped in an element with display: blockor display: inline-block (possibly others).
It's also not possible to test this in a unit test with browserTrigger. I assume because the select is completely blocked to any user interaction, but browserTrigger dispatches the event directly from the DOM.

[Narretz]

The bug also appear in IE Edge. Here are two plnkrs that show how to repro the bug without angular, and two workarounds. _Setting the option.label before the value_ works in IE9 too and will land in core. This was manually tested.

• http://plnkr.co/edit/b1nUJdRaZ4e5JHBA5THB?p=preview
• http://plnkr.co/edit/vT3dCoSnL0vPlsZnV5Ag?p=preview

[mapurba]

I have a workaround for the IE picklist issue. which is not directly related with angular.
before Fix: http://plnkr.co/edit/NGwG1LUVk3ctGOsX15KI?p=preview
After Fix:http://plnkr.co/edit/NGwG1LUVk3ctGOsX15KI?p=preview
$("select").click(function(){ $(this).append('<option></option>'); $(this).find('option:last').remove(); });
I just added dummy option for the dom to rerender the select and removed it.
let me know it works for you

[petebacondarwin]

@apurbamandal - is that a fix or a workaround?

[Narretz]

This has been fixed in https://github.com/angular/angular.js/commit/42c97c5db5921e9e5447fb32bdae1f48da42844f and I just tested that it still works in 1.6.6 (it's not automatically testable unfortunately)

[mapurba]

Hi, Pete, First of all, correct me if I am wrong. This is an issue with ie particularly. Irrespective of angular. I have faced it with a very old gwt code. Second, pardon me its not a fix its a workaround. As I faced this which wasn't in angular. Hence i couldn't verify that. But I am sure that the workaround works with angular too. People from different frameworks land on this page for the same issue. So I thought it might help. I am pretty sure @Narretz it works,but Please suggest me any better way to fix it with normal Jquery. as i am use pure javascript I would be very thankful to you.

[Narretz]

@apurbamandal You are right, this issue is not exclusive to AngularJS, but happens under specific circumstances when select options are added or manipulated with Javascript. In our case, it was caused by a combination of reading the option.value before setting it, and updating the option.label afterwards. It's not conclusive how this happens unfortunately (there might be other reasons).
Your solution is more of a workaround, as adding and removing an option element triggers a re-render of the select which unfreezes it. If this issue shows up when people google the problem it's ok to have it here, it's just important to point out that this is not a problem in AngularJS anymore.