Create new tag on blur of searchInput

examples/demo-tagging.html

@@ -85,7 +85,17 @@ <h4>(Predictive Search Model / No Labels)</h4>
   </ui-select>
   <p>Selected: {{multipleDemo.colors2}}</p>
   <hr>
-
+
+  <h3>Tagging on blur with Simple String Tags</h3>
+  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors3" theme="bootstrap" sortable="true" ng-disabled="disabled" style="width: 300px;" tag-on-blur="true" title="Choose a color">
+    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
+    <ui-select-choices repeat="color in availableColors | filter:$select.search">
+      {{color}}
+    </ui-select-choices>
+  </ui-select>
+  <p>Selected: {{multipleDemo.colors3}}</p>
+  <hr>
+
   <h3>Object Tags</h3>
   <ui-select multiple tagging="tagTransform" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
@@ -131,7 +141,7 @@ <h3>Tagging without multiple</h3>
   <p>Selected: {{person.selected}}</p>
 
   <h3>Tagging without multiple, with simple strings</h3>
-  <ui-select tagging tagging-label="('new')" ng-model="singleDemo.color" theme="bootstrap" style="width: 800px;" title="Choose a color">
+  <ui-select tagging tagging-label="('new')" ng-model="singleDemo.color" theme="bootstrap" style="width: 800px;"title="Choose a color">
     <ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter: $select.search">
       <div ng-bind-html="color | highlight: $select.search"></div>
@@ -140,6 +150,7 @@ <h3>Tagging without multiple, with simple strings</h3>
   <p>Selected: {{singleDemo.color}}</p>
 
 
+
   <div style="height:500px"></div>
 
 </body>

examples/demo.js

@@ -169,6 +169,7 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
   $scope.multipleDemo = {};
   $scope.multipleDemo.colors = ['Blue','Red'];
   $scope.multipleDemo.colors2 = ['Blue','Red'];
+  $scope.multipleDemo.colors3 = ['Blue','Red'];
   $scope.multipleDemo.selectedPeople = [$scope.people[5], $scope.people[4]];
   $scope.multipleDemo.selectedPeople2 = $scope.multipleDemo.selectedPeople;
   $scope.multipleDemo.selectedPeopleWithGroupBy = [$scope.people[8], $scope.people[6]];

src/uiSelectController.js

@@ -337,7 +337,8 @@ uis.controller('uiSelectCtrl',
   ctrl.close = function(skipFocusser) {
     if (!ctrl.open) return;
     if (ctrl.ngModel && ctrl.ngModel.$setTouched) ctrl.ngModel.$setTouched();
-    _resetSearchInput();
+    if(!ctrl.tagOnBlur)
+      _resetSearchInput();
     ctrl.open = false;
 
     $scope.$broadcast('uis:close', skipFocusser);
@@ -490,6 +491,20 @@ uis.controller('uiSelectCtrl',
     }
 
   });
+
+  //Allow tagging on blur
+  ctrl.searchInput.on('blur', function() {
+    if ((ctrl.items.length > 0 || ctrl.tagging.isActivated) && ctrl.tagOnBlur) {
+          $timeout(function() {
+            ctrl.searchInput.triggerHandler('tagged');
+            var newItem = ctrl.search;
+            if ( ctrl.tagging.fct ) {
+              newItem = ctrl.tagging.fct( newItem );
+            }
+            if (newItem) ctrl.select(newItem, true);
+          });
+        }
+    });
 
   // If tagging try to split by tokens and add items
   ctrl.searchInput.on('paste', function (e) {

src/uiSelectDirective.js

@@ -119,6 +119,18 @@ uis.directive('uiSelect',
             $select.taggingTokens = {isActivated: true, tokens: tokens };
           }
         });
+
+        //check if tag-on-blur is enabled
+        attrs.$observe('tagOnBlur', function() {
+          if(attrs.tagOnBlur !== undefined && attrs.tagOnBlur === 'true')
+          {
+              $select.tagOnBlur = true;
+          }
+          else
+          {
+              $select.tagOnBlur = false;            
+          }
+        });
 
         //Automatically gets focus when loaded
         if (angular.isDefined(attrs.autofocus)){