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 typeaheadFocusOnSelect
Browse files Browse the repository at this point in the history
Closes #4212
Closes #4211
Fixes #4206
  • Loading branch information
Foxandxss committed Aug 16, 2015
1 parent f8eab55 commit b5ecda3
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 10 deletions.
4 changes: 4 additions & 0 deletions src/typeahead/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,7 @@ The typeahead directives provide several attributes:
* `typeahead-select-on-blur`
_(Defaults: false)_ :
On blur, select the currently highlighted match

* `typeahead-focus-on-select`
_(Defaults: true) :
On selection, focus the input element the typeahead directive is associated with
34 changes: 25 additions & 9 deletions src/typeahead/test/typeahead.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -469,54 +469,70 @@ describe('typeahead tests', function() {
$timeout.flush();
expect($scope.isNoResults).toBeFalsy();
}));

it('should not focus the input if `typeahead-focus-on-select` is false', function() {
var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-focus-on-select="false"></div>');
$document.find('body').append(element);
var inputEl = findInput(element);

changeInputValueTo(element, 'b');
var match = $(findMatches(element)[1]).find('a')[0];

$(match).click();
$scope.$digest();
$timeout.flush();

expect(document.activeElement).not.toBe(inputEl[0]);
expect($scope.result).toEqual('baz');
});
});

describe('select on exact match', function() {
it('should select on an exact match when set', function() {
$scope.onSelect = jasmine.createSpy('onSelect');
var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
var inputEl = findInput(element);

changeInputValueTo(element, 'bar');

expect($scope.result).toEqual('bar');
expect(inputEl.val()).toEqual('bar');
expect(element).toBeClosed();
expect($scope.onSelect).toHaveBeenCalled();
});

it('should not select on an exact match by default', function() {
$scope.onSelect = jasmine.createSpy('onSelect');
var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue"></div>');
var inputEl = findInput(element);

changeInputValueTo(element, 'bar');

expect($scope.result).toBeUndefined();
expect(inputEl.val()).toEqual('bar');
expect($scope.onSelect.calls.any()).toBe(false);
});

it('should not be case sensitive when select on an exact match', function() {
$scope.onSelect = jasmine.createSpy('onSelect');
var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
var inputEl = findInput(element);

changeInputValueTo(element, 'BaR');

expect($scope.result).toEqual('bar');
expect(inputEl.val()).toEqual('bar');
expect(element).toBeClosed();
expect($scope.onSelect).toHaveBeenCalled();
});

it('should not auto select when not a match with one potential result left', function() {
$scope.onSelect = jasmine.createSpy('onSelect');
var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
var inputEl = findInput(element);

changeInputValueTo(element, 'fo');

expect($scope.result).toBeUndefined();
expect(inputEl.val()).toEqual('fo');
expect($scope.onSelect.calls.any()).toBe(false);
Expand Down
4 changes: 3 additions & 1 deletion src/typeahead/typeahead.js
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap

//return focus to the input element if a match was selected via a mouse click event
// use timeout to avoid $rootScope:inprog error
$timeout(function() { element[0].focus(); }, 0, false);
if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
$timeout(function() { element[0].focus(); }, 0, false);
}
};

//bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)
Expand Down

1 comment on commit b5ecda3

@bestconsultant
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this option, exactly what I needed. After selection the dropdown list was hiding the added element.
typeahead-focus-on-select="false"

Please sign in to comment.