diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js index 4423b8a66e..fb57c5d0fd 100644 --- a/src/typeahead/test/typeahead.spec.js +++ b/src/typeahead/test/typeahead.spec.js @@ -64,6 +64,10 @@ describe('typeahead tests', function() { return findDropDown(element).find('li'); }; + var findClearBtn = function(element) { + return element.find('.glyphicon-remove'); + }; + var triggerKeyDown = function(element, keyCode, options) { options = options || {}; var inputEl = findInput(element); @@ -232,6 +236,45 @@ describe('typeahead tests', function() { expect($scope.result).toEqual('prefixfoo'); }); + it('should display X button after some option selected', function() { + $scope.updaterFn = function(selectedItem) { + return 'prefix' + selectedItem; + }; + var element = prepareInputEl('
'); + changeInputValueTo(element, 'f'); + triggerKeyDown(element, 13); + expect($scope.result).toEqual('prefixfoo'); + var clearBtn = findClearBtn(element); + expect(clearBtn).not.toHaveClass('ng-hide'); + }); + + it('should hide X button when selected item removed and input got empty', function() { + $scope.updaterFn = function(selectedItem) { + return 'prefix' + selectedItem; + }; + var element = prepareInputEl(''); + changeInputValueTo(element, 'f'); + triggerKeyDown(element, 13); + expect($scope.result).toEqual('prefixfoo'); + var clearBtn = findClearBtn(element); + changeInputValueTo(element, ''); + expect(clearBtn).toHaveClass('ng-hide'); + }); + + it('when pressing X button should clear the ngModel', function() { + $scope.updaterFn = function(selectedItem) { + return 'prefix' + selectedItem; + }; + var element = prepareInputEl(''); + changeInputValueTo(element, 'f'); + triggerKeyDown(element, 13); + expect($scope.result).toEqual('prefixfoo'); + var clearBtn = findClearBtn(element); + clearBtn.click(); + $scope.$digest(); + expect($scope.result).toEqual(''); + }); + it('should support custom label rendering function', function() { $scope.formatterFn = function(sourceItem) { return 'prefix' + sourceItem; diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js index 126fd1fd47..2eaa5a38a4 100644 --- a/src/typeahead/typeahead.js +++ b/src/typeahead/typeahead.js @@ -162,6 +162,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap //pop-up element used to display matches var popUpEl = angular.element(''); + var clearBtnEl = angular.element(''); popUpEl.attr({ id: popupId, matches: 'matches', @@ -319,6 +320,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap function recalculatePosition() { scope.position = appendToBody ? $position.offset(element) : $position.position(element); scope.position.top += element.prop('offsetHeight'); + scope.positionClearBtn = $position.position(element); + scope.positionClearBtn.top += element.prop('offsetHeight') / 4; + scope.positionClearBtn.left += element.prop('offsetWidth') - 20; } //we need to propagate user's query so we can higlight matches @@ -340,7 +344,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap }; resetMatches(); - + //method for clear blutton + scope.clearModel = function() { + $setModelValue(originalScope, ''); + scope.showClearBtn = false; + }; scope.assignIsOpen = function (isOpen) { isOpenSetter(originalScope, isOpen); }; @@ -351,6 +359,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap var model, item; selected = true; + + scope.showClearBtn = true; // Indicator that some choice selected (clear button should appear) locals[parserResult.itemName] = item = scope.matches[activeIdx].model; model = parserResult.modelMapper(originalScope, locals); $setModelValue(originalScope, model); @@ -498,6 +508,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap }); var $popup = $compile(popUpEl)(scope); + var $clearBtn = $compile(clearBtnEl)(scope); if (appendToBody) { $document.find('body').append($popup); @@ -506,6 +517,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap } else { element.after($popup); } + element.after($clearBtn); this.init = function(_modelCtrl, _ngModelOptions) { modelCtrl = _modelCtrl; @@ -529,6 +541,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap isLoadingSetter(originalScope, false); cancelPreviousTimeout(); resetMatches(); + if (!inputValue) { + scope.showClearBtn = false; // Hide clear button if input empty + } } if (isEditable) {