Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(typeahead): add 'select on blur' option.
Browse files Browse the repository at this point in the history
- Add `select-on-blur` option

Closes #3445
  • Loading branch information
DSI-Entreprises authored and wesleycho committed Jul 19, 2015
1 parent 054341b commit 68cac59
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/typeahead/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,7 @@ The typeahead directives provide several attributes:
* `typeahead-focus-first`
_(Defaults: true)_ :
Should the first match automatically be focused as you type?

* `select-on`blur`
_(Defaults: false)_ :
On blur, select the currently highlighted match
26 changes: 26 additions & 0 deletions src/typeahead/test/typeahead.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,32 @@ describe('typeahead tests', function () {
expect(element).toBeClosed();
});

it('should not select any match on blur without \'select-on-blur=true\' option', function () {

var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
var inputEl = findInput(element);

changeInputValueTo(element, 'b');
inputEl.blur(); // input loses focus

// no change
expect($scope.result).toEqual('b');
expect(inputEl.val()).toEqual('b');
});

it('should select a match on blur with \'select-on-blur=true\' option', function () {

var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-blur="true"></div>');
var inputEl = findInput(element);

changeInputValueTo(element, 'b');
inputEl.blur(); // input loses focus

// first element should be selected
expect($scope.result).toEqual('bar');
expect(inputEl.val()).toEqual('bar');
});

it('should select match on click', function () {

var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
Expand Down
8 changes: 8 additions & 0 deletions src/typeahead/typeahead.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
//a callback executed when a match is selected
var onSelectCallback = $parse(attrs.typeaheadOnSelect);

//should it select highlighted popup value when losing focus?
var isSelectOnBlur = angular.isDefined(attrs.typeaheadSelectOnBlur) ? originalScope.$eval(attrs.typeaheadSelectOnBlur) : false;

var inputFormatter = attrs.typeaheadInputFormatter ? $parse(attrs.typeaheadInputFormatter) : undefined;

var appendToBody = attrs.typeaheadAppendToBody ? originalScope.$eval(attrs.typeaheadAppendToBody) : false;
Expand Down Expand Up @@ -357,6 +360,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
});

element.bind('blur', function (evt) {
if (isSelectOnBlur && scope.activeIdx >= 0) {
scope.$apply(function () {
scope.select(scope.activeIdx);
});
}
hasFocus = false;
});

Expand Down

0 comments on commit 68cac59

Please sign in to comment.