feat(chips): md-add-on-blur functionality (#9095)

* Allows developers to convert the remaining input text into a new chip on input blur.
  This is useful for example, when having chips for email addresses.

Closes #3364.

Author: devversion

src/components/chips/chips.spec.js

@@ -202,6 +202,112 @@ describe('<md-chips>', function() {
         expect(scope.selectChip).toHaveBeenCalled();
         expect(scope.selectChip.calls.mostRecent().args[0]).toBe('Grape');
       });
+
+      describe('when adding chips on blur', function() {
+
+        it('should append a new chip for the remaining text', function() {
+          var element = buildChips(
+            '<md-chips ng-model="items" md-add-on-blur="true">' +
+            '</md-chips>'
+          );
+
+          var input = element.find('input');
+
+          expect(scope.items.length).toBe(3);
+
+          input.val('Remaining');
+          input.triggerHandler('change');
+
+          // Trigger a blur event, to check if the text was converted properly.
+          input.triggerHandler('blur');
+
+          expect(scope.items.length).toBe(4);
+        });
+
+        it('should not append a new chip if the limit has reached', function() {
+          var element = buildChips(
+            '<md-chips ng-model="items" md-add-on-blur="true" md-max-chips="3">' +
+            '</md-chips>'
+          );
+
+          var input = element.find('input');
+
+          expect(scope.items.length).toBe(3);
+
+          input.val('Remaining');
+          input.triggerHandler('change');
+
+          // Trigger a blur event, to check if the text was converted properly.
+          input.triggerHandler('blur');
+
+          expect(scope.items.length).toBe(3);
+        });
+
+        it('should not append a new chip when the chips model is invalid', function() {
+          var element = buildChips(
+            '<md-chips ng-model="items" md-add-on-blur="true">'
+          );
+
+          var input = element.find('input');
+          var ngModelCtrl = element.controller('ngModel');
+
+          expect(scope.items.length).toBe(3);
+
+          input.val('Remaining');
+
+          input.triggerHandler('change');
+          input.triggerHandler('blur');
+          $timeout.flush();
+
+          expect(scope.items.length).toBe(4);
+
+          input.val('Second');
+
+          ngModelCtrl.$setValidity('is-valid', false);
+
+          input.triggerHandler('change');
+          input.triggerHandler('blur');
+
+          expect(scope.items.length).toBe(4);
+        });
+
+        it('should not append a new chip when the custom input model is invalid', function() {
+          var element = buildChips(
+            '<md-chips ng-model="items" md-add-on-blur="true">' +
+              '<input ng-model="subModel" ng-maxlength="2">' +
+            '</md-chips>'
+          );
+
+          $timeout.flush();
+
+          var input = element.find('input');
+
+          expect(scope.items.length).toBe(3);
+
+          input.val('EN');
+
+          input.triggerHandler('change');
+          input.triggerHandler('blur');
+
+          // Flush the timeout after each blur, because custom inputs have listeners running
+          // in an Angular digest.
+          $timeout.flush();
+
+          expect(scope.items.length).toBe(4);
+
+          input.val('Another');
+
+          input.triggerHandler('change');
+          input.triggerHandler('blur');
+
+          // Flush the timeout after each blur, because custom inputs have listeners running
+          // in an Angular digest.
+          $timeout.flush();
+
+          expect(scope.items.length).toBe(4);
+        });
+
+      });
 
       describe('when removable', function() {
 

src/components/chips/js/chipsController.js

@@ -8,13 +8,15 @@ angular
  * the models of various input components.
  *
  * @param $scope
+ * @param $attrs
  * @param $mdConstant
  * @param $log
  * @param $element
+ * @param $timeout
  * @param $mdUtil
  * @constructor
  */
-function MdChipsCtrl ($scope, $mdConstant, $log, $element, $timeout, $mdUtil) {
+function MdChipsCtrl ($scope, $attrs, $mdConstant, $log, $element, $timeout, $mdUtil) {
   /** @type {$timeout} **/
   this.$timeout = $timeout;
 
@@ -52,7 +54,10 @@ function MdChipsCtrl ($scope, $mdConstant, $log, $element, $timeout, $mdUtil) {
   this.hasAutocomplete = false;
 
   /** @type {string} */
-  this.enableChipEdit = $mdUtil.parseAttributeBoolean(this.mdEnableChipEdit);
+  this.enableChipEdit = $mdUtil.parseAttributeBoolean($attrs.mdEnableChipEdit);
+
+  /** @type {string} */
+  this.addOnBlur = $mdUtil.parseAttributeBoolean($attrs.mdAddOnBlur);
 
   /**
    * Hidden hint text for how to delete a chip. Used to give context to screen readers.
@@ -512,6 +517,23 @@ MdChipsCtrl.prototype.onInputFocus = function () {
 
 MdChipsCtrl.prototype.onInputBlur = function () {
   this.inputHasFocus = false;
+
+  var chipBuffer = this.getChipBuffer().trim();
+
+  // Update the custom chip validators.
+  this.validateModel();
+
+  var isModelValid = this.ngModelCtrl.$valid;
+
+  if (this.userInputNgModelCtrl) {
+    isModelValid &= this.userInputNgModelCtrl.$valid;
+  }
+
+  // Only append the chip and reset the chip buffer if the chips and input ngModel is valid.
+  if (this.addOnBlur && chipBuffer && isModelValid) {
+    this.appendChip(chipBuffer);
+    this.resetChipBuffer();
+  }
 };
 
 /**

src/components/chips/js/chipsDirective.js

@@ -98,6 +98,8 @@
    * @param {number=} md-max-chips The maximum number of chips allowed to add through user input.
    *    <br/><br/>The validation property `md-max-chips` can be used when the max chips
    *    amount is reached.
+   * @param {boolean=} md-add-on-blur When set to true, remaining text inside of the input will
+   *    be converted into a new chip on blur.
    * @param {expression} md-transform-chip An expression of form `myFunction($chip)` that when called
    *    expects one of the following return values:
    *    - an object representing the `$chip` input string
@@ -224,7 +226,6 @@
         readonly: '=readonly',
         removable: '=mdRemovable',
         placeholder: '@',
-        mdEnableChipEdit: '@',
         secondaryPlaceholder: '@',
         maxChips: '@mdMaxChips',
         transformChip: '&mdTransformChip',
@@ -360,11 +361,14 @@
             // input.
             scope.$watch('$mdChipsCtrl.readonly', function(readonly) {
               if (!readonly) {
+
                 $mdUtil.nextTick(function(){
-                  if (chipInputTemplate.indexOf('<md-autocomplete') === 0)
-                    mdChipsCtrl
-                        .configureAutocomplete(element.find('md-autocomplete')
-                            .controller('mdAutocomplete'));
+
+                  if (chipInputTemplate.indexOf('<md-autocomplete') === 0) {
+                    var autocompleteEl = element.find('md-autocomplete');
+                    mdChipsCtrl.configureAutocomplete(autocompleteEl.controller('mdAutocomplete'));
+                  }
+
                   mdChipsCtrl.configureUserInput(element.find('input'));
                 });
               }