diff --git a/docs/assets/demo.js b/docs/assets/demo.js
index 9d6702c4c..a8537ec53 100644
--- a/docs/assets/demo.js
+++ b/docs/assets/demo.js
@@ -173,6 +173,7 @@ app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
vm.multipleDemo = {};
vm.multipleDemo.colors = ['Blue','Red'];
vm.multipleDemo.colors2 = ['Blue','Red'];
+ vm.multipleDemo.colors3 = ['Blue','Red'];
vm.multipleDemo.selectedPeople = [vm.people[5], vm.people[4]];
vm.multipleDemo.selectedPeople2 = vm.multipleDemo.selectedPeople;
vm.multipleDemo.selectedPeopleWithGroupBy = [vm.people[8], vm.people[6]];
diff --git a/docs/examples/demo-tagging.html b/docs/examples/demo-tagging.html
index a6ae2eb6c..866fc48bf 100644
--- a/docs/examples/demo-tagging.html
+++ b/docs/examples/demo-tagging.html
@@ -28,6 +28,16 @@
Simple String Tags (Predictive Search Model & No Labels)<
Selected: {{ctrl.multipleDemo.colors2}}
+ Simple String Tags (create tag on blur)
+
+ {{$item}}
+
+ {{color}}
+
+
+ Selected: {{ctrl.multipleDemo.colors3}}
+
+
Object Tags (with grouping)
{{$item.name}} <{{$item.email}}>
diff --git a/src/uiSelectController.js b/src/uiSelectController.js
index b7dc2801c..156421f71 100644
--- a/src/uiSelectController.js
+++ b/src/uiSelectController.js
@@ -439,10 +439,15 @@ uis.controller('uiSelectCtrl',
};
// Closes the dropdown
- ctrl.close = function(skipFocusser) {
+ ctrl.close = function(skipFocusser, options) {
+ if (options === undefined) options = {};
+ if (options.resetSearchInput === undefined) options.resetSearchInput = true;
+
if (!ctrl.open) return;
if (ctrl.ngModel && ctrl.ngModel.$setTouched) ctrl.ngModel.$setTouched();
- _resetSearchInput();
+ if(options.resetSearchInput) {
+ _resetSearchInput();
+ }
ctrl.open = false;
$scope.$broadcast('uis:close', skipFocusser);
@@ -645,6 +650,18 @@ uis.controller('uiSelectCtrl',
});
+ //Allow tagging on blur
+ ctrl.searchInput.on('blur', function () {
+ if ((ctrl.items.length > 0 || ctrl.tagging.isActivated) && ctrl.taggingOnBlur) {
+ ctrl.searchInput.triggerHandler('tagged');
+ var newItem = ctrl.search;
+ if (ctrl.tagging.fct) {
+ newItem = ctrl.tagging.fct(newItem);
+ }
+ if (newItem) ctrl.select(newItem, true);
+ }
+ });
+
ctrl.searchInput.on('paste', function (e) {
var data;
diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js
index cded3d463..38dbd5b1b 100644
--- a/src/uiSelectDirective.js
+++ b/src/uiSelectDirective.js
@@ -143,6 +143,11 @@ uis.directive('uiSelect',
}
});
+ //check if tagging-on-blur is enabled
+ attrs.$observe('taggingOnBlur', function () {
+ $select.taggingOnBlur = angular.isDefined(attrs.taggingOnBlur);
+ });
+
//Automatically gets focus when loaded
if (angular.isDefined(attrs.autofocus)){
$timeout(function(){
@@ -183,7 +188,7 @@ uis.directive('uiSelect',
} else {
skipFocusser = true;
}
- $select.close(skipFocusser);
+ $select.close(skipFocusser, {resetSearchInput: !$select.taggingOnBlur});
scope.$digest();
}
$select.clickTriggeredSelect = false;
diff --git a/test/select.spec.js b/test/select.spec.js
index 5b735689f..b5c28e657 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -204,6 +204,12 @@ describe('ui-select tests', function() {
e.keyCode = keyCode;
element.trigger(e);
}
+
+ function triggerBlur(element) {
+ var e = jQuery.Event("blur");
+ element.trigger(e);
+ }
+
function triggerPaste(element, text, isClipboardEvent) {
var e = jQuery.Event("paste");
if (isClipboardEvent) {
@@ -1427,6 +1433,46 @@ describe('ui-select tests', function() {
expect($(el).scope().$select.selected).toEqual(['idontexist']);
});
+ it('should allow creating tag on blur in multiple select mode with tagging-on-blur enabled', function() {
+
+ var el = compileTemplate(
+ ' \
+ {{$select.selected.name}} \
+ \
+ {{item}} \
+ \
+ '
+ );
+
+ clickMatch(el);
+ var searchInput = el.find('.ui-select-search');
+ searchInput.click();
+ setSearchText(el, 'should be created on blur');
+ triggerBlur(searchInput);
+
+ expect($(el).scope().$select.selected).toEqual(['should be created on blur']);
+ });
+
+ it('should not create tag on blur in multiple select mode with tagging-on-blur disabled', function() {
+
+ var el = compileTemplate(
+ ' \
+ {{$select.selected.name}} \
+ \
+ {{item}} \
+ \
+ '
+ );
+
+ clickMatch(el);
+ var searchInput = el.find('.ui-select-search');
+ searchInput.click();
+ setSearchText(el, 'should not be created on blur');
+ triggerBlur(searchInput);
+
+ expect($(el).scope().$select.selected).toEqual([]);
+ });
+
it('should remove a choice when multiple and remove-selected is not given (default is true)', function () {
var el = compileTemplate(