feat(typeahead): Added -auto-highlight & -prevent-submission options

src/typeahead/test/typeahead.spec.js

@@ -82,6 +82,21 @@ describe('typeahead tests', function () {
           return "Expected '" + angular.mock.dump(this.actual) + "' to be opened.";
         };
         return typeaheadEl.css('display') === 'block' && liEls.length === noOfMatches && $(liEls[activeIdx]).hasClass('active');
+      }, toBeOpenButInactive: function (noOfMatches) {
+
+        var typeaheadEl = findDropDown(this.actual);
+        var liEls = findMatches(this.actual);
+
+        this.message = function () {
+          return "Expected '" + angular.mock.dump(this.actual) + "' to be opened.";
+        };
+
+        var hasActive = false;
+        $.each(liEls, function(index, liEl) {
+          hasActive |= $(liEl).hasClass('active');
+        });
+
+        return typeaheadEl.css('display') === 'block' && liEls.length === noOfMatches && !hasActive;
       }
     });
   });
@@ -474,6 +489,33 @@ describe('typeahead tests', function () {
 
       expect(element).toBeOpenWithActive(2, 0);
     });
+
+    it('pr 1363 - allow form submission on ENTER if typeahead-prevent-submission is set to false', function () {
+      var element = prepareInputEl("<div><input ng-model='result' typeahead='item for item in source | filter:$viewValue' typeahead-prevent-submission='false'></div>");
+      var e = triggerKeyDown(element, 13);
+
+      expect(e.isDefaultPrevented()).toBeFalsy();
+    });
+
+    it('pr 1363 - expect no match to be selected if typeahead-auto-highlight is set to false', function () {
+      var element = prepareInputEl("<div><input ng-model='result' typeahead='item for item in source | filter:$viewValue' typeahead-auto-highlight='false'></div>");
+
+      changeInputValueTo(element, 'b');
+      expect(element).toBeOpenButInactive(2);
+    });
+
+    it('pr 1363 - should blur input on TAB if no matches are selected', function () {
+
+      var element = prepareInputEl("<div><input ng-model='result' typeahead='item for item in source | filter:$viewValue' typeahead-auto-highlight='false'></div>");
+      var inputEl = findInput(element);
+
+      changeInputValueTo(element, 'b');
+      triggerKeyDown(element, 9);
+
+      expect($scope.result).toEqual('b');
+      expect(inputEl.val()).toEqual('b');
+      expect(element).toBeClosed();
+    });
   });
 
   describe('input formatting', function () {

src/typeahead/typeahead.js

@@ -57,6 +57,12 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
       var inputFormatter = attrs.typeaheadInputFormatter ? $parse(attrs.typeaheadInputFormatter) : undefined;
 
+      //should first item of matches be highlighted automatically?
+      var autoHighlight = originalScope.$eval(attrs.typeaheadAutoHighlight) !== false;
+
+      //should form submission be prevented (enter keypress)?
+      var preventSubmission = originalScope.$eval(attrs.typeaheadPreventSubmission) !== false;
+
       //INTERNAL VARIABLES
 
       //model setter executed upon match selection
@@ -104,7 +110,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
           if (inputValue === modelCtrl.$viewValue && hasFocus) {
             if (matches.length > 0) {
 
-              scope.activeIdx = 0;
+              //if autoHighlight, activates first item of matches
+              scope.activeIdx = autoHighlight === true ? 0 : -1;
               scope.matches.length = 0;
 
               //transform labels
@@ -226,11 +233,22 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
       //bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)
       element.bind('keydown', function (evt) {
 
-        //typeahead is open and an "interesting" key was pressed
-        if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
-          if (evt.which === 13) {
+        if (HOT_KEYS.indexOf(evt.which) === -1) {
+          //skip if a key other than hot keys listed is pressed
+          return;
+        } else if (evt.which === 13) {
+          if (preventSubmission === true) {
+            //(enter key) prevent default if prevent submission is set to true
             evt.preventDefault();
           }
+          if (scope.activeIdx === -1) {
+            //skip if no matches or no match selected
+            return;
+          }
+        } else if (evt.which === 9 && scope.activeIdx === -1) {
+          //skip if tab key is pressed and no item is selected (input field will be blurred)
+          resetMatches();
+          scope.$digest();
           return;
         }