From 2b26d9af04d9fcdc11a4d0f04e875cdf83438f19 Mon Sep 17 00:00:00 2001 From: Wesley Cho Date: Sat, 15 Aug 2015 11:57:49 -0700 Subject: [PATCH] feat(typeahead): add `typeaheadFocusOnSelect` - Add ability to disable focusing the input on selection --- src/datepicker/test/datepicker.spec.js | 2 +- src/modal/test/modal.spec.js | 4 +++ src/typeahead/docs/readme.md | 6 ++++- src/typeahead/test/typeahead.spec.js | 36 +++++++++++++++++++------- src/typeahead/typeahead.js | 4 ++- 5 files changed, 40 insertions(+), 12 deletions(-) diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index 8ea3a774aa..e42e7c2fcb 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/src/datepicker/test/datepicker.spec.js @@ -2099,7 +2099,7 @@ describe('datepicker directive', function() { }); afterEach(function() { - $document.find('body').find('.dropdown-menu').remove(); + $document.find('body').children().remove(); }); it('should append to the body', function() { diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js index 58f20cfa39..456848b5fa 100644 --- a/src/modal/test/modal.spec.js +++ b/src/modal/test/modal.spec.js @@ -396,6 +396,8 @@ describe('$modal', function () { lastElement.focus(); triggerKeyDown(lastElement, 9); expect(document.activeElement.getAttribute('id')).toBe('tab-focus-link'); + + initialPage.remove(); }); it('should change focus to last element when shift+tab key is pressed', function() { @@ -413,6 +415,8 @@ describe('$modal', function () { lastElement.focus(); triggerKeyDown(lastElement, 9, true); expect(document.activeElement.getAttribute('id')).toBe('tab-focus-button'); + + initialPage.remove(); }); }); diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md index 71892ac6dd..09a8e66526 100644 --- a/src/typeahead/docs/readme.md +++ b/src/typeahead/docs/readme.md @@ -27,7 +27,7 @@ The typeahead directives provide several attributes: * `typeahead-editable` _(Defaults: true)_ : Should it restrict model values to the ones selected from the popup only ? - + * `typeahead-focus-first` _(Defaults: true)_ : Should the first match automatically be focused as you type? @@ -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 diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js index 92a75de3f4..5137a25002 100644 --- a/src/typeahead/test/typeahead.spec.js +++ b/src/typeahead/test/typeahead.spec.js @@ -469,8 +469,26 @@ 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('
'); + var inputEl = findInput(element); + angular.element(document.body).append(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'); + + element.remove(); + }); }); - + describe('select on exact match', function() { it('should select on an exact match when set', function() { $scope.onSelect = jasmine.createSpy('onSelect'); @@ -478,45 +496,45 @@ describe('typeahead tests', function() { 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('
'); 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('
'); 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('
'); var inputEl = findInput(element); changeInputValueTo(element, 'fo'); - + expect($scope.result).toBeUndefined(); expect(inputEl.val()).toEqual('fo'); expect($scope.onSelect.calls.any()).toBe(false); diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js index db661ba0ca..650582b3c8 100644 --- a/src/typeahead/typeahead.js +++ b/src/typeahead/typeahead.js @@ -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 (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)