From 02b989b78cf6068acd959c24ffe120e2290b5948 Mon Sep 17 00:00:00 2001 From: troch Date: Thu, 5 Dec 2013 22:56:04 +0000 Subject: [PATCH 1/2] feat(typeahead): Added -auto-highlight & -prevent-submission options --- src/typeahead/typeahead.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js index b1eecff95f..f26fb3440d 100644 --- a/src/typeahead/typeahead.js +++ b/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; } From 23d92f5da6b2c21ad7f667817a2d0297b7ab2017 Mon Sep 17 00:00:00 2001 From: troch Date: Tue, 10 Dec 2013 08:31:50 +0000 Subject: [PATCH 2/2] feat(typeahead): unit tests for prevent submission auto highlight --- src/typeahead/test/typeahead.spec.js | 42 ++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js index 8486436806..f790dba62b 100644 --- a/src/typeahead/test/typeahead.spec.js +++ b/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("
"); + 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("
"); + + changeInputValueTo(element, 'b'); + expect(element).toBeOpenButInactive(2); + }); + + it('pr 1363 - should blur input on TAB if no matches are selected', function () { + + var element = prepareInputEl("
"); + 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 () {