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

feat(typeahead): add typeaheadFocusOnSelect #4212

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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