fix bug in arrow navigation

Author: just-boris

examples/bootstrap.html

@@ -63,7 +63,7 @@
 
           <ui-select ng-model="person.selected" theme="bootstrap">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
-            <ui-select-choices group-by="'age'" repeat="item in people | filter: $select.search">
+            <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
               <small ng-bind-html="item.email | highlight: $select.search"></small>
             </ui-select-choices>

examples/demo.js

@@ -58,14 +58,14 @@ app.controller('DemoCtrl', function($scope, $http) {
 
   $scope.person = {};
   $scope.people = [
-    { name: 'Adam',      email: '[email protected]',      age: 12 },
-    { name: 'Amalie',    email: '[email protected]',    age: 12 },
-    { name: 'Estefanía', email: 'estefaní[email protected]', age: 21 },
-    { name: 'Adrian',    email: '[email protected]',    age: 21 },
-    { name: 'Wladimir',  email: '[email protected]',  age: 30 },
-    { name: 'Samantha',  email: '[email protected]',  age: 30 },
-    { name: 'Nicole',    email: '[email protected]',    age: 43 },
-    { name: 'Natasha',   email: '[email protected]',   age: 54 }
+    { name: 'Adam',      email: '[email protected]',      group: 'Foo', age: 12 },
+    { name: 'Amalie',    email: '[email protected]',    group: 'Foo', age: 12 },
+    { name: 'Estefanía', email: 'estefaní[email protected]', group: 'Foo', age: 21 },
+    { name: 'Adrian',    email: '[email protected]',    group: 'Foo', age: 21 },
+    { name: 'Wladimir',  email: '[email protected]',  group: 'Foo', age: 30 },
+    { name: 'Samantha',  email: '[email protected]',  group: 'bar', age: 30 },
+    { name: 'Nicole',    email: '[email protected]',    group: 'bar', age: 43 },
+    { name: 'Natasha',   email: '[email protected]',   group: 'Baz', age: 54 }
   ];
 
   $scope.address = {};

examples/select2-bootstrap3.html

@@ -70,7 +70,7 @@
 
           <ui-select ng-model="person.selected" theme="select2" class="form-control">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
-            <ui-select-choices group-by="'age'" repeat="item in people | filter: $select.search">
+            <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
               <small ng-bind-html="item.email | highlight: $select.search"></small>
             </ui-select-choices>

examples/selectize-bootstrap3.html

@@ -85,7 +85,7 @@
 
           <ui-select ng-model="person.selected" theme="selectize">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
-            <ui-select-choices group-by="'age'" repeat="item in people | filter: $select.search">
+            <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
               <small ng-bind-html="item.email | highlight: $select.search"></small>
             </ui-select-choices>

src/select.js

@@ -89,7 +89,7 @@
     };
 
     self.getGroupNgRepeatExpression = function() {
-      return '($group, $items) in $select.groups'
+      return '($group, $items) in $select.groups';
     };
 
     self.getNgRepeatExpression = function(lhs, rhs, trackByExp, grouped) {
@@ -170,7 +170,10 @@
             ctrl.groups[groupValue].push(item);
           }
         });
-        setPlainItems(items);
+        ctrl.items = [];
+        angular.forEach(Object.keys(ctrl.groups).sort(), function(group) {
+          ctrl.items = ctrl.items.concat(ctrl.groups[group]);
+        });
       }
 
       function setPlainItems(items) {
@@ -530,9 +533,9 @@
         var groupByExp = tAttrs.groupBy;
         return function link(scope, element, attrs, $select, transcludeFn) {
 
-          var groups = element.querySelectorAll('.ui-select-choices-group');
           if(groupByExp) {
-            groups.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression())
+            var groups = element.querySelectorAll('.ui-select-choices-group');
+            groups.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression());
           }
 
           var choices = element.querySelectorAll('.ui-select-choices-row');

test/select.spec.js

@@ -14,14 +14,14 @@ describe('ui-select tests', function() {
     };
 
     scope.people = [
-      { name: 'Adam',      email: '[email protected]',      age: 12 },
-      { name: 'Amalie',    email: '[email protected]',    age: 12 },
-      { name: 'Estefanía', email: 'estefaní[email protected]', age: 21 },
-      { name: 'Adrian',    email: '[email protected]',    age: 21 },
-      { name: 'Wladimir',  email: '[email protected]',  age: 30 },
-      { name: 'Samantha',  email: '[email protected]',  age: 30 },
-      { name: 'Nicole',    email: '[email protected]',    age: 43 },
-      { name: 'Natasha',   email: '[email protected]',   age: 54 }
+      { name: 'Adam',      email: '[email protected]',      group: 'Foo', age: 12 },
+      { name: 'Amalie',    email: '[email protected]',    group: 'Foo', age: 12 },
+      { name: 'Estefanía', email: 'estefaní[email protected]', group: 'Foo', age: 21 },
+      { name: 'Adrian',    email: '[email protected]',    group: 'Foo', age: 21 },
+      { name: 'Wladimir',  email: '[email protected]',  group: 'Foo', age: 30 },
+      { name: 'Samantha',  email: '[email protected]',  group: 'bar', age: 30 },
+      { name: 'Nicole',    email: '[email protected]',    group: 'bar', age: 43 },
+      { name: 'Natasha',   email: '[email protected]',   group: 'Baz', age: 54 }
     ];
   }));
 
@@ -201,7 +201,7 @@ describe('ui-select tests', function() {
       return compileTemplate(
           '<ui-select ng-model="selection"> \
         <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
-        <ui-select-choices group-by="\'age\'" repeat="person in people | filter: $select.search"> \
+        <ui-select-choices group-by="\'group\'" repeat="person in people | filter: $select.search"> \
           <div ng-bind-html="person.name | highlight: $select.search"></div> \
           <div ng-bind-html="person.email | highlight: $select.search"></div> \
         </ui-select-choices> \
@@ -211,14 +211,14 @@ describe('ui-select tests', function() {
 
     it('should create items group', function() {
       var el = createUiSelect();
-      expect(el.find('.ui-select-choices-group').length).toBe(5);
+      expect(el.find('.ui-select-choices-group').length).toBe(3);
     });
 
     it('should show label before each group', function() {
       var el = createUiSelect();
       expect(el.find('.ui-select-choices-group .ui-select-choices-group-label').map(function() {
         return this.textContent;
-      }).toArray()).toEqual(['12', '21', '30', '43', '54']);
+      }).toArray()).toEqual(['Baz', 'Foo', 'bar']);
     });
 
     it('should hide empty groups', function() {
@@ -228,21 +228,21 @@ describe('ui-select tests', function() {
 
       expect(el.find('.ui-select-choices-group .ui-select-choices-group-label').map(function() {
         return this.textContent;
-      }).toArray()).toEqual(['12', '21', '30']);
+      }).toArray()).toEqual(['Foo']);
     });
 
     it('should change activeItem through groups', function() {
       var el = createUiSelect();
-      el.scope().$select.search = 'd';
+      el.scope().$select.search = 'n';
       scope.$digest();
       var choices = el.find('.ui-select-choices-row');
       expect(choices.eq(0)).toHaveClass('active');
-      expect(getGroupLabel(choices.eq(0)).text()).toBe('12');
+      expect(getGroupLabel(choices.eq(0)).text()).toBe('Baz');
 
       triggerKeydown(el.find('input'), 40 /*Down*/);
       scope.$digest();
       expect(choices.eq(1)).toHaveClass('active');
-      expect(getGroupLabel(choices.eq(1)).text()).toBe('21');
+      expect(getGroupLabel(choices.eq(1)).text()).toBe('Foo');
     });
   });