From d51ba9d8701625636915657093c2b3ab7c23b192 Mon Sep 17 00:00:00 2001
From: Brett Knighton <bkknighton@xactware.com>
Date: Fri, 27 Mar 2015 14:16:59 -0600
Subject: [PATCH] Feature: Option to not select first item in select-choices by
 default.

---
 src/common.js                    |  1 +
 src/uiSelectChoicesDirective.js  |  8 ++++++-
 src/uiSelectController.js        | 20 ++++++++++++-----
 src/uiSelectMultipleDirective.js | 20 ++++++++---------
 test/select.spec.js              | 37 ++++++++++++++++++++++++++------
 5 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/src/common.js b/src/common.js
index efc7a5b9f..26a971f50 100644
--- a/src/common.js
+++ b/src/common.js
@@ -93,6 +93,7 @@ var uis = angular.module('ui.select', [])
   placeholder: '', // Empty by default, like HTML tag <select>
   refreshDelay: 1000, // In milliseconds
   closeOnSelect: true,
+  firstItemActive: true,
   generateId: function() {
     return latestId++;
   },
diff --git a/src/uiSelectChoicesDirective.js b/src/uiSelectChoicesDirective.js
index 41d24e31b..098553bbd 100644
--- a/src/uiSelectChoicesDirective.js
+++ b/src/uiSelectChoicesDirective.js
@@ -51,7 +51,7 @@ uis.directive('uiSelectChoices',
 
         scope.$watch('$select.search', function(newValue) {
           if(newValue && !$select.open && $select.multiple) $select.activate(false, true);
-          $select.activeIndex = $select.tagging.isActivated ? -1 : 0;
+          $select.activeIndex = $select.tagging.isActivated || !$select.firstItemActive ? -1 : 0;
           $select.refresh(attrs.refresh);
         });
 
@@ -60,6 +60,12 @@ uis.directive('uiSelectChoices',
           var refreshDelay = scope.$eval(attrs.refreshDelay);
           $select.refreshDelay = refreshDelay !== undefined ? refreshDelay : uiSelectConfig.refreshDelay;
         });
+
+        attrs.$observe('firstItemActive', function() {
+          // $eval() is needed otherwise we get a string instead of a boolean
+          var firstItemActive = scope.$eval(attrs.firstItemActive);
+          $select.firstItemActive = firstItemActive !== undefined ? firstItemActive : uiSelectConfig.firstItemActive;
+        });
       };
     }
   };
diff --git a/src/uiSelectController.js b/src/uiSelectController.js
index 9fe273ac2..75a8e7453 100644
--- a/src/uiSelectController.js
+++ b/src/uiSelectController.js
@@ -16,12 +16,13 @@ uis.controller('uiSelectCtrl',
   ctrl.searchEnabled = uiSelectConfig.searchEnabled;
   ctrl.sortable = uiSelectConfig.sortable;
   ctrl.refreshDelay = uiSelectConfig.refreshDelay;
+  ctrl.firstItemActive = uiSelectConfig.firstItemActive;
 
   ctrl.removeSelected = false; //If selected item(s) should be removed from dropdown list
   ctrl.closeOnSelect = true; //Initialized inside uiSelect directive link function
   ctrl.search = EMPTY_SEARCH;
 
-  ctrl.activeIndex = 0; //Dropdown of choices
+  ctrl.activeIndex = ctrl.firstItemActive ? 0 : -1; //Dropdown of choices
   ctrl.items = []; //All available choices
 
   ctrl.open = false;
@@ -43,7 +44,7 @@ uis.controller('uiSelectCtrl',
   if (ctrl.searchInput.length !== 1) {
     throw uiSelectMinErr('searchInput', "Expected 1 input.ui-select-search but got '{0}'.", ctrl.searchInput.length);
   }
-  
+
   ctrl.isEmpty = function() {
     return angular.isUndefined(ctrl.selected) || ctrl.selected === null || ctrl.selected === '';
   };
@@ -68,12 +69,14 @@ uis.controller('uiSelectCtrl',
 
       ctrl.open = true;
 
-      ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex;
+      ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? (ctrl.firstItemActive ? 0 : -1) : ctrl.activeIndex;
 
       // ensure that the index is set to zero for tagging variants
       // that where first option is auto-selected
-      if ( ctrl.activeIndex === -1 && ctrl.taggingLabel !== false ) {
+      if ( ctrl.firstItemActive && ctrl.activeIndex === -1 && ctrl.taggingLabel !== false ) {
         ctrl.activeIndex = 0;
+      } else {
+        ctrl.activeIndex = -1;
       }
 
       // Give it time to appear before focus
@@ -375,13 +378,20 @@ uis.controller('uiSelectCtrl',
         else if (ctrl.activeIndex > 0 || (ctrl.search.length === 0 && ctrl.tagging.isActivated && ctrl.activeIndex > -1)) { ctrl.activeIndex--; }
         break;
       case KEY.TAB:
-        if (!ctrl.multiple || ctrl.open) ctrl.select(ctrl.items[ctrl.activeIndex], true);
+        if ((!ctrl.multiple || ctrl.open) && ctrl.activeIndex >= 0) {
+          ctrl.select(ctrl.items[ctrl.activeIndex], true);
+        } else {
+          ctrl.close();
+        }
         break;
       case KEY.ENTER:
         if(ctrl.open && ctrl.activeIndex >= 0){
           ctrl.select(ctrl.items[ctrl.activeIndex]); // Make sure at least one dropdown item is highlighted before adding.
         } else {
           ctrl.activate(false, true); //In case its the search input in 'multiple' mode
+          if(!ctrl.firstItemActive) {
+            ctrl.close();
+          }
         }
         break;
       case KEY.ESC:
diff --git a/src/uiSelectMultipleDirective.js b/src/uiSelectMultipleDirective.js
index b1e997ec5..5304509e0 100644
--- a/src/uiSelectMultipleDirective.js
+++ b/src/uiSelectMultipleDirective.js
@@ -9,7 +9,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
           $select = $scope.$select,
           ngModel;
 
-      //Wait for link fn to inject it 
+      //Wait for link fn to inject it
       $scope.$evalAsync(function(){ ngModel = $scope.ngModel; });
 
       ctrl.activeMatchIndex = -1;
@@ -21,7 +21,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
 
       ctrl.refreshComponent = function(){
         //Remove already selected items
-        //e.g. When user clicks on a selection, the selected array changes and 
+        //e.g. When user clicks on a selection, the selected array changes and
         //the dropdown should remove that item
         $select.refreshItems();
         $select.sizeSearchInput();
@@ -120,7 +120,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
         };
         if (!inputValue) return resultMultiple; //If ngModel was undefined
         for (var k = inputValue.length - 1; k >= 0; k--) {
-          //Check model array of currently selected items 
+          //Check model array of currently selected items
           if (!checkFnMultiple($select.selected, inputValue[k])){
             //Check model array of all items available
             if (!checkFnMultiple(data, inputValue[k])){
@@ -131,8 +131,8 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
         }
         return resultMultiple;
       });
-      
-      //Watch for external model changes 
+
+      //Watch for external model changes
       scope.$watchCollection(function(){ return ngModel.$modelValue; }, function(newValue, oldValue) {
         if (oldValue != newValue){
           ngModel.$modelValue = null; //Force scope model value and ngModel value to be out of sync to re-run formatters
@@ -253,7 +253,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
 
         if ( ! KEY.isVerticalMovement(e.which) ) {
           scope.$evalAsync( function () {
-            $select.activeIndex = $select.taggingLabel === false ? -1 : 0;
+            $select.activeIndex = $select.taggingLabel === false || !$select.firstItemActive ? -1 : 0;
           });
         }
         // Push a "create new" item into array if there is a search string
@@ -264,7 +264,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
             return;
           }
           // always reset the activeIndex to the first item when tagging
-          $select.activeIndex = $select.taggingLabel === false ? -1 : 0;
+          $select.activeIndex = $select.taggingLabel === false || !$select.firstItemActive ? -1 : 0;
           // taggingLabel === false bypasses all of this
           if ($select.taggingLabel === false) return;
 
@@ -324,7 +324,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
               if ( hasTag ) {
                 items = stashArr;
                 scope.$evalAsync( function () {
-                  $select.activeIndex = 0;
+                  $select.activeIndex = $select.firstItemActive ? 0 : -1;
                   $select.items = items;
                 });
               }
@@ -348,7 +348,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
             items = items.concat(stashArr);
           }
           scope.$evalAsync( function () {
-            $select.activeIndex = 0;
+            $select.activeIndex = $select.firstItemActive ? 0 : -1;
             $select.items = items;
           });
         }
@@ -398,4 +398,4 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
 
     }
   };
-}]);
\ No newline at end of file
+}]);
diff --git a/test/select.spec.js b/test/select.spec.js
index d502040b4..16c7823ab 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -211,7 +211,7 @@ describe('ui-select tests', function() {
 
     expect(getMatchLabel(el)).toEqual('Adam');
   });
-  
+
   it('should correctly render initial state with track by feature', function() {
     var el = compileTemplate(
       '<ui-select ng-model="selection.selected"> \
@@ -319,13 +319,13 @@ describe('ui-select tests', function() {
   it('should toggle allow-clear directive', function() {
     scope.selection.selected = scope.people[0];
     scope.isClearAllowed = false;
-    
+
     var el = createUiSelect({theme : 'select2', allowClear: '{{isClearAllowed}}'});
     var $select = el.scope().$select;
 
     expect($select.allowClear).toEqual(false);
     expect(el.find('.select2-search-choice-close').length).toEqual(0);
-    
+
     // Turn clear on
     scope.isClearAllowed = true;
     scope.$digest();
@@ -1233,12 +1233,15 @@ describe('ui-select tests', function() {
             if (attrs.closeOnSelect !== undefined) { attrsHtml += ' close-on-select="' + attrs.closeOnSelect + '"'; }
             if (attrs.tagging !== undefined) { attrsHtml += ' tagging="' + attrs.tagging + '"'; }
             if (attrs.taggingTokens !== undefined) { attrsHtml += ' tagging-tokens="' + attrs.taggingTokens + '"'; }
+            if (attrs.firstItemActive === undefined) { attrs.firstItemActive = true; }
+        } else {
+            attrs = { firstItemActive: true };
         }
 
         return compileTemplate(
             '<ui-select multiple ng-model="selection.selectedMultiple"' + attrsHtml + ' theme="bootstrap" style="width: 800px;"> \
                 <ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
-                <ui-select-choices repeat="person in people | filter: $select.search"> \
+                <ui-select-choices repeat="person in people | filter: $select.search" first-item-active="' + attrs.firstItemActive + '"> \
                   <div ng-bind-html="person.name | highlight: $select.search"></div> \
                   <div ng-bind-html="person.email | highlight: $select.search"></div> \
                 </ui-select-choices> \
@@ -1504,10 +1507,32 @@ describe('ui-select tests', function() {
         var el = createUiSelectMultiple();
         var searchInput = el.find('.ui-select-search');
 
-        triggerKeydown(searchInput, Key.Down)
-        triggerKeydown(searchInput, Key.Enter)
+        triggerKeydown(searchInput, Key.Down); //Open dropdown
+        el.scope().$select.activeIndex = 0;
+
+        triggerKeydown(searchInput, Key.Down);
+        triggerKeydown(searchInput, Key.Enter);
         expect(scope.selection.selectedMultiple.length).toEqual(2);
+    });
+
+    it('should close choices on ENTER when firstItemActive set to false', function() {
+
+        scope.selection.selectedMultiple = [scope.people[5]]; //Samantha
+        var el = createUiSelectMultiple({firstItemActive: false});
+        var searchInput = el.find('.ui-select-search');
+
+        triggerKeydown(searchInput, Key.Enter);
+        expect(el.scope().$select.open).toEqual(false);
+    });
+
+    it('should close choices on TAB when firstItemActive set to false', function() {
+
+        scope.selection.selectedMultiple = [scope.people[5]]; //Samantha
+        var el = createUiSelectMultiple({firstItemActive: false});
+        var searchInput = el.find('.ui-select-search');
 
+        triggerKeydown(searchInput, Key.Tab);
+        expect(el.scope().$select.open).toEqual(false);
     });
 
     it('should increase $select.activeIndex when pressing DOWN key from dropdown', function() {