IE8 - 10: Rendering doesn't seem to work properly with select directive

[wesleycho]

I am not able to reproduce this currently unfortunately, but I am seeing some strange behavior here for these browsers in particular with 1.2.0-rc.2. For Chrome & Firefox, this works just fine.

We have select elements nested in an ng-repeat, and each repeated element has two selects, one to set a parent object to one model, and the other to set a child object of the parent to another model. The select element with the children objects are filtered in ng-options according to the repeater array in ng-repeat, and the particular instance object from ng-repeat (i.e. ng-repeat="item in items", so ng-options=".... foo in array | filter: filterFoos(items, item)). The filter modifies the items you can select from in the second select element according to what has already been selected for that particular parent object, say subtopics of a parent topic & not being allowed to select a duplicate of what has already been selected.

In IE8 - 10, I can select the same parent topic in two different repeated select elements. I can then select different children options for the first time in each of the other repeated select elements, and the filter displays the correct set. However, once you change one of those selected options for the select that selects from children objects, IE8 - 10 lose track, and fail to render them correctly.

I have a scope.$watch in the controller that is dealing with this template, and currently I employ this hack to make the problem a benign one in IE8:

`$timeout(function () {
  $('.lte9 select').each(function (idx, elem) {
    $(elem).find('option').each(function (idx2, option) {
      $(option.text($(option).text() + ' ');
    });
  });
  $(elem).hide().show();
});

However, this does not solve the problem of the same value showing in IE9 and IE10 when the loss of correct rendering happens - Angular is still keeping track of the model correctly, and Angular renders the DOM correctly here. This is an IE display problem with dynamic options that isn't quite solved correctly in Angular.

It should be noted, that hack could easily be implemented in a directive without jQuery for those interested readers.

[wesleycho]

Just a further update on this if anyone is stuck here, I updated this hack in order to get correct behavior in IE9 & IE10 with this:

$timeout(function () {
  $('.lte10 select').each(function (dx, elem) {
    elem.options[elem.selectedIndex].text += ' '
  });
});

[IgorMinar]

@wesleycho if this is just a rendering issue then you should pass false argument to $timeout so that a digest is not triggered unnecessarily

[IgorMinar]

a fix that could make it into angular could most likely not use $timeout, is there another way around this?

[wesleycho]

I could take a look at it, this hack was created under extreme time pressure - the problem is purely a rendering issue though due to IE8 - 10 (not sure about 11) not correctly rendering updated options in the select element.

[wesleycho]

So I did some investigation, and it would appear that the fix should appear inside the render function of the select directive. However, the two "fixes" I came up with both cause IE to execute a blur as soon as you click the select element, but otherwise work as they're supposed to in forcing the browser re-render.

I might have been looking in the wrong place to try to implement a fix, but I suspect that scope.$watch(render) may be causing the render callback to fire an excessive number of times and somehow is related to the fixes I came up with not working in an acceptable manner.

The issue here is that cloning a DOM template (in this case, the usage of var optionTemplate = jqLite(document.createElement('option') & optionTemplate.clone()) along with a potentially async execution causes IE to not update DOM rendering appropriately. However, simply replacing all usage of optionTemplate.clone() with document.createElement('option') does not seem to be enough to fix this issue.

From what I understand, this is a problem present in all IE browsers, including IE11.

[jreading]

+1