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?

[Josh68]

@careywalker, your code (minor modification based on version) worked for me with 0.9.6.

(EDIT) This would apply cleanly also to the latest version (v0.11.1) -- no merge conflicts. Would it be worth trying another pull request on the current version? I also haven't taken time to see why it fixes the issue in IE8, but it doesn't break anything for me, in my project, in latest IE, Chrome, or FF.

[gillius]

#754 seems to work for me. We have no choice to support IE8 and IE11 now during a enterprise migration to IE11, and Angular 1.2.16 has a bug impacting IE11, but upgrading beyond select 0.2 doesn't work in IE8, and it doesn't work in Angular past 1.2.16. So now we will use @Josh68's code with Angular 1.2.28, the last Angular version supporting IE8. Once the IE8 merge is complete, we can upgrade to latest Angular and mainline ui-select.

[alexey-yurganov]

Josh68@8317a0c
This fixed for me follow issue IE 8:
"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."

angular js 1.2.28
select.js 0.11.1 from https://github.com/Josh68/ui-select

Thank you.