fix an existing issue: angular-ui/ui-select#282

change mouseenter to mouseover and prevent the event in capture mode

Author: alannesta

app/scripts/directives/dropdown-items.js

@@ -39,7 +39,7 @@
 
           choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression($select.parserResult.itemName, '$select.items', $select.parserResult.trackByExp, groupByExp))
             .attr('ng-if', '$select.open') //Prevent unnecessary watches when dropdown is closed
-            .attr('ng-mouseenter', '$select.setActiveItem('+$select.parserResult.itemName +')')
+            .attr('ng-mouseover', '$select.setActiveItem('+$select.parserResult.itemName +')')
             .attr('ng-click', '$select.select(' + $select.parserResult.itemName + ',false,$event)');
 
           var rowsInner = element.querySelectorAll('.acq-dropdown-item-row-inner');
@@ -49,13 +49,15 @@
 
           $compile(element, transcludeFn)(scope); //Passing current transcludeFn to be able to append elements correctly from uisTranscludeAppend
 
-          scope.$on('$destroy', function(){
-            console.log('dropdown-item directive scope destroy');
-          });
+          // not the same element after compile?
+          // element.querySelectorAll('.acq-dropdown-item-row').on('mouseover', function(){
+          //   console.log('choice row mouseenter triggered');
+          // });
+
+          // element.on('mouseover', function(){
+          //   console.log('dropdown-item mouseover triggered');
+          // });
 
-          element.on('$destroy', function(){
-            console.log('dropdow-item directive element destroy');
-          });
           // scope.$watch('$select.search', function(newValue) {
           //   if(newValue && !$select.open && $select.multiple) $select.activate(false, true);
           //   // $select.activeIndex = $select.tagging.isActivated ? -1 : 0;

app/scripts/directives/dropdown-list.js

@@ -32,6 +32,7 @@
         var ngModel = ctrls[1];
 
         var searchInput = element.querySelectorAll('input.ui-select-search');
+        var scrollFlag = false;   // marks if the mouseover event is triggered by the ensureHighlightVisible function call. stopPropagation if so
 
         //From view --> model
         ngModel.$parsers.unshift(function (inputValue) {
@@ -80,15 +81,26 @@
           $select.selected = ngModel.$viewValue;
         };
 
+        // element.on('focusin', function(){
+        //   console.log('focusin event on dropdown-list')
+        // });
 
-        element.on('focus', function(){
-          console.log('focus event on dropdown-list')
-        });
+        // element.on('mouseover', function(){
+        //   console.log('mouseover event bubble mode');
+        // });
+
+        element[0].addEventListener('mouseover', function(e){
+          console.log('mouseover event capture mode');
+          if (scrollFlag){
+            e.preventDefault();
+            e.stopPropagation();
+          }
+          scrollFlag = false;
+        }, true);
 
         // handle key press
         element.on('keydown', function(e) {
           var key = e.which;
-          console.log('key event on dropdown-list');
           scope.$apply(function() {
             var processed = false;
             if (!processed && $select.items.length > 0) {
@@ -97,14 +109,13 @@
             if (processed) {
               //TODO Check si el tab selecciona aun correctamente
               //Crear test
+              console.log('processed');
               e.preventDefault();
               e.stopPropagation();
             }
             if((key === 38 || key ===40) && $select.items.length > 0){
               ensureHighlightVisible();
             }
-
-
           });
         });
 
@@ -123,15 +134,15 @@
           }
         });
 
-        // when move the UP/DOWN, ensure that the dropdown scrolls to keep the current highlighted item in sight
+        // when move UP/DOWN, ensure that the dropdown scrolls to keep the current highlighted item in sight
         function ensureHighlightVisible() {
-          // debugger;
+          scrollFlag = true;
           var container = angular.element(element[0].querySelectorAll('.acq-dropdown-item'));
           var choices = angular.element(container[0].querySelectorAll('.acq-dropdown-item-row'));
-          if (choices.length < 1) {
-            throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length);
-          }
-
+          // if (choices.length < 1) {
+          //   throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length);
+          // }
+          // debugger;
           var highlighted = choices[$select.activeIndex];
           var posY = highlighted.offsetTop + highlighted.clientHeight - container[0].scrollTop;
           var height = container[0].offsetHeight;
@@ -164,12 +175,11 @@
         $document.on('click', onDocumentClick);
 
         element.on('$destroy', function(){
-          console.log('dropdow-list directive element destroy');
+
         });
 
         scope.$on('$destroy', function() {
           $document.off('click', onDocumentClick);
-          console.log('dropdow-list directive scope destroy');
         });
 
         transcludeFn(scope, function(clone) {

app/scripts/directives/dropdownListCtrl.js

@@ -41,8 +41,8 @@
     ctrl.open = false;
 
     var _searchInput = $element.querySelectorAll('input.ui-select-search');
+
     var threshold = $element.attr('search-threshold') === undefined ? ctrl.searchThreshold : $element.attr('search-threshold');
-    console.log(threshold);
 
     ctrl.isEmpty = function () {
       return angular.isUndefined(ctrl.selected) || ctrl.selected === null || ctrl.selected === '';
@@ -72,7 +72,6 @@
     };
 
     function resetSearchInput() {
-      // console.log(ctrl.items.length);
       if (ctrl.resetSearchInput) {
         ctrl.search = '';
         //reset activeIndex
@@ -150,6 +149,7 @@
     ctrl.setActiveItem = function (item) {
       // debugger;
       // console.log(ctrl.items.length);
+      console.log('set active item called');
       ctrl.activeIndex = ctrl.items.indexOf(item);
     };
 
@@ -204,7 +204,7 @@
           break;
         case KEY.UP:
           if (!ctrl.open && ctrl.multiple) ctrl.activate(false, true); //In case its the search input in 'multiple' mode
-          else if (ctrl.activeIndex > 0 || (ctrl.search.length === 0)) { ctrl.activeIndex--; }
+          else if (ctrl.activeIndex > 0) { ctrl.activeIndex--; }
           break;
         case KEY.TAB:
           if (!ctrl.multiple || ctrl.open) ctrl.select(ctrl.items[ctrl.activeIndex], true);