feat(tagging): enable tag-creation on blur

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]];

docs/examples/demo-tagging.html

@@ -28,6 +28,16 @@ <h3>Simple String Tags <small>(Predictive Search Model &amp; No Labels)</small><
   <p>Selected: {{ctrl.multipleDemo.colors2}}</p>
   <hr>
 
+  <h3>Simple String Tags <small>(create tag on blur)</small></h3>
+  <ui-select multiple tagging tagging-label="false" tagging-on-blur ng-model="ctrl.multipleDemo.colors3" theme="bootstrap" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a color">
+    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
+    <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
+      {{color}}
+    </ui-select-choices>
+  </ui-select>
+  <p>Selected: {{ctrl.multipleDemo.colors3}}</p>
+  <hr>
+
   <h3>Object Tags <small>(with grouping)</small></h3>
   <ui-select multiple tagging="ctrl.tagTransform" ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>

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;
 

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;

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(
+        '<ui-select multiple tagging tagging-label="false" tagging-on-blur ng-model="selection.selected" theme="bootstrap" sortable="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color"> \
+          <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+          <ui-select-choices repeat="item in []"> \
+            {{item}} \
+          </ui-select-choices> \
+        </ui-select>'
+    );
+
+    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(
+        '<ui-select multiple tagging tagging-label="false" ng-model="selection.selected" theme="bootstrap" sortable="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color"> \
+          <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+          <ui-select-choices repeat="item in []"> \
+            {{item}} \
+          </ui-select-choices> \
+        </ui-select>'
+    );
+
+    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(