Mouseenter (selection) doesn't work in 1.2.16+ using IE8

[sambomartin]

On mouseenter the selected item moves to the last one. The mouseover event fires for each row in the collection - always leaving the last one selected.

Current work-around is to use 1.2.15.

[gillius]

I don't know if my issue is related or not, but I can't get the select to work on IE8 for any version later than 0.2.1. This is the last version that works in IE8 that I can test. I have to use Angular 1.2.16 with this because of the bug that was fixed with ng-transclude. What happens to me is that I click on an element and it doesn't actually select anything. After I click on the first element, then it seems to actually select that one but then I get a ng-change event for what seems to be every single element in the list, which blows up my application.

I tried angular-ui-select 0.7.0 with Angular 1.2.16, but it doesn't work (doesn't display content inside of the templates, so dropdown is empty), so I can't isolate the selection issue between Angular upgrade and angular-ui-select upgrade.

[gillius]

I think my issue is different, I do see it's always setting the last item active. It's actually the ng-click that isn't working, and I'm not sure why, maybe the a's href for javascript:void(0) is eating the event somehow, not sure.

I actually can 95% workaround the issues by adding my own ng-click and ng-mouseenter events myself to the transcluded content. The issue is that there are wrapper elements around them, like the a tag, which has visible space surrounding the parts that I can control. The fact that I can work-around this is sort of surprising.

scope.selItem = function($select, $event, item) {
    $event.stopPropagation();
    //do work with item, as I would with ng-change
    $select.select(loc); //needed to make the dropdown disappear
}

<ui-select-choices ng-mouseenter="$event.stopPropagation()" repeat="item in items | filter: $select.search">
    <div render-item="item" ng-click="selLoc($select, $event, item)" ng-mouseenter="$event.stopPropagation()"></div>
</ui-select-choices>

[careywalker]

I am not fully sure why the below worked but adding the ng-mouseenter and ng-click events to the rowsInner instead of the choices solved this issue in IE8 for me. I'll continue to look into why this works and post back when I can confirm the reason this resolves this issue.

Existing Code:

      choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression($select.parserResult.itemName, '$select.items', $select.parserResult.trackByExp, groupByExp))
          .attr('ng-mouseenter', '$select.setActiveItem('+$select.parserResult.itemName +')')
          .attr('ng-click', '$select.select(' + $select.parserResult.itemName + ')');

      var rowsInner = element.querySelectorAll('.ui-select-choices-row-inner');
      if (rowsInner.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row-inner but got '{0}'.", rowsInner.length);
      rowsInner.attr('uis-transclude-append', ''); //Adding uisTranscludeAppend directive to row element after choices element has ngRepeat

Code after I made the changes:

      choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression($select.parserResult.itemName, '$select.items', $select.parserResult.trackByExp, groupByExp));


      var rowsInner = element.querySelectorAll('.ui-select-choices-row-inner');
      if (rowsInner.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row-inner but got '{0}'.", rowsInner.length);
      rowsInner.attr('uis-transclude-append', '')
          .attr('ng-mouseenter', '$select.setActiveItem(' + $select.parserResult.itemName + ')')
          .attr('ng-click', '$select.select(' + $select.parserResult.itemName + ')');//Adding uisTranscludeAppend directive to row element after choices element has ngRepeat

[wiciul]

Changes I have applied to 0.8.3 in order to make it work with IE8.

[jonathanchris]

Any chance this will get added to a release?

[milkolori]

I had the same issue. This fix worked for me. It will be great if it is included in some future release.

[jonathanchris]

I created a pull request with the event delegation fixes from @jlfama fork. The indexOf issues can be fixed by including an ie8 shim.

[amcdnl]

Eh, I think most of us are on 1.3 ( which drops IE8 support ) ... maybe maintain a separate branch for IE8'ers?