ng-option doesn't handle first selection properly under IE11

[TimotheeJeannin]

Selecting an option for the first time in a select dropdown under IE11 when no option is currently selected

• does not make the select dropdown display the correct option
• does properly set the selected option value in the model though

Reproducible: alaways

Browsers: IE11

Operating system: Windows 7, Windows 8

Steps to reproduce:

• Go to this plunker http://plnkr.co/edit/XWXhqupzPItuLT3KUvPq?p=preview using IE11
• Click on the select dropdown to open it
• Click on the second, third, fourth or fifth option
• See the select displaying first instead of the selected option

or

• Go to the AngularJs doc with IE11 https://docs.angularjs.org/api/ng/directive/select
• Scroll down to the last example
• Click on -- choose color -- in the dropdown next to Color (null allowed):
• Click on red in the dropdown next to Color (null not allowed):
• See the select displaying black instead of red

[caitp]

What I'm seeing is:

The model value IS actually being set correctly, HOWEVER

For the first selection, the incorrect option appears to be selected in the view. But for subsequent selections, it seems to work as expected

This is reproducible

Seems to be a regression introduced in v1.3.0-beta.3 (http://plnkr.co/edit/jCt2PBLmwmAzStgjJa69?p=preview), probably by f40f54c / dc149de

[caitp]

This also affects IE10 and IE9

[TimotheeJeannin]

Angular 1.2.15 and 1.2.16 seem to be affected too. (http://plnkr.co/edit/VePYsd7TO1qPoVoxUJji?p=preview)

Works fine with Angular 1.2.14 and 1.3.0-beta.2 though.

[caitp]

Yeah. Do you have access to a native windows machine @TimotheeJeannin? If you do, do you want to try to work on a fix for this?

I can try later in the week, but I don't have a native windows machine, so it's a bit trickier for me, and I'll be a bit occupied.

We should definitely fix this asap.

[TimotheeJeannin]

I do have access to a native windows machine and may be able to work on a fix.
It's 5:30 pm here, I may be able to submit something tomorrow morning.

[caitp]

fantastic --- if you need help I can pair with you on getting it working, just let me know

[TimotheeJeannin]

Hi @caitp,

I have the following test case that passes on Chrome and Firefox and fails on IE:

it('should display the selected element while handling initially undefined model', function() {

  scope.fields = [
      { name: "zero", id: 0 },
      { name: "one", id: 1 },
      { name: "two", id: 2 }
  ];
  compile('<select ng-model="fieldId" ' +
          'ng-options="field.id as field.name for field in fields">' +
          '</select>');

  // Select the option { name: "two", id: 2 }
  // It's index is 3 as an empty option has been automatically added to handle the undefined fieldId model
  browserTrigger(element.find('option').eq(3));
  expect(element).toEqualSelect('0', '1', ['2']);
});

I'm digging through the select.js source code but I can't find where IE is not behaving properly.

I reverted this commit f40f54c and the test case continues to fail on IE but if I do a grunt build and make a manual test it appears to work.

How do you think we should solve this ?

[caitp]

It might not be an issue that is easy to test, unfortunately. @wesleycho did you ever figure out a way to test this behaviour synchronously?

[wesleycho]

I used an existing app to work with this behavior (although ultimately failed at fixing the issue) - it is a hard thing to reproduce, and I failed at attempting to reproduce it as well.

[anishchandwani]

An issue has been reported for Microsoft for further investigation. You can track the status here:
https://connect.microsoft.com/IE/feedback/details/895899/angular-js-ng-option-doesnt-handle-first-selection-properly-under-ie11

[jaysoo]

I was able to reproduce this without Angular in IE11 in this small example:

http://plnkr.co/edit/Fh91IY3yCj3beRJ2atYN?p=preview

^^^ If you open that in IE11 and select the second option, it will incorrectly show "first".

Also, I found a workaround that seems to be working for me:

http://plnkr.co/edit/hlvhL0UHVJC3wgDAVFO0?p=preview

Not saying this is a solution, but might help anyone looking for a workaround.

[caitp]

@jaysoo @ealtenho has been looking at this lately for a better way to solve it, and I think what we're going to end up doing is just reverting f40f54c and getting that issue fixed in Gecko instead.

@ealtenho can you chime in here?

[ealtenho]

@caitp @jaysoo working with @btford I've been unable to see that reverting f40f54c affects a test of the behavior described in #7715 related to selecting an option in a select marked with required and with the first option marked as disabled. It's not clear to me whether this is the same issue.

[caitp]

Okay --- so what we have is basically 3 different issues (at least, I might be missing some).

1. IE not showing a newly selected option until the DOM is manipulated a second time (Rody's)
2. FF selected option flickering when digests happen frequently and hovering over an option (fixed by f40f54c)
3. The issue in fix(select) ... breaks some selects with required attributes on firefox. #7715 (which is really a difference in behaviour between two browsers, and the proper behaviour is not really specified anywhere).

So, I think we've been mixing up these issues a fair bit over the course of dealing with them, f40f54c (and the 1.2 port) don't seem to be responsible for all of these issues, but I'm still leaning towards reverting it anyway and getting 2. fixed in Gecko. We still have the issue with IE, and we still have the difference of behaviour between FF and chrome when dynamically inserting options

[gz7]

Found a workaround for IE. I am setting the selection value($scope.fieldId = 1;) in the controller here is the plunkr: http://plnkr.co/edit/RXv6gUJkh4wzZ3AvmMne?p=preview

[sumanjaiswal]

Yh ..m also facing the same issue. Is there any fix for this?

[fer]

just tried @gz7 solution but doesn't fit my case... would prefer to have nothing selected. Any fix for this?

[tydaeus]

Providing some form of default option, either in the controller or via the one allowed empty value option tag, seems to handle the situation. This option can have the value (display or actual) of "".

<select ng-model="modelName" ng-options="label for (key, value) in object">
    <option value="">
    </option>
</select>

Sadly, this does keep a blank value available on the dropdown. I'm using separate validation to ensure that this blank option is not considered valid.

It may be necesssary to manually initialize the DOM dropdown's selectedIndex property to -1. Will experiment when I get the chance.

[bagofjuice]

@ttydaeus Thanks. I add the 'required' tag to the select element and then prevent form submission if there are form errors. It's not the correct fix, but will do for the short term.

Note: I'm using Angular 1.3.16 and this is still a bug in IE10. However the bug doesn't appear in IE11.

[somewhatabstract]

I'm seeing this issue in Google Chrome Version 47.0.2498.0 dev-m (64-bit) with Angular 1.2.27.

[atul221282]

Has this been resolved or not? As I am still having this issue and had to temp fix it by having empty option tag.Using it with angularjs 1.2.16

[dannycsng]

I have a multiple select. The issue comes up when there is only one option returns from data retrieval.
The option is combination of id+" - "+name. The UI shows only the "-" but the value of id+" - "+name shows in the DOM when I inspect the element in IE11.

I am not sure this relates to this issue but wants to get some idea.

[henrahmagix]

@dannycsng The changelog marks this as fixed in 1.2.21: c0afbfa