fix(chips): add-on-blur with autocomplete (#9949)

* Properly adds the selected item of the autocomplete to the chips when `md-add-on-blur` is enabled

* No longer adds chips on blur when `md-require-match` is enabled (previously user could add non-matches to the chips)

* Moves logic into an extra function to keep blur listener clear.

Fixes #9582.

Author: devversion

src/components/chips/chips.spec.js

@@ -310,6 +310,66 @@ describe('<md-chips>', function() {
           expect(scope.items.length).toBe(4);
         });
 
+        it('should not append a new chip when requireMatch is enabled', function() {
+          var template =
+            '<md-chips ng-model="items" md-add-on-blur="true" md-require-match="true">' +
+              '<md-autocomplete ' +
+                  'md-selected-item="selectedItem" ' +
+                  'md-search-text="searchText" ' +
+                  'md-items="item in querySearch(searchText)" ' +
+                  'md-item-text="item">' +
+                '<span md-highlight-text="searchText">{{item}}</span>' +
+              '</md-autocomplete>' +
+            '</md-chips>';
+
+          setupScopeForAutocomplete();
+
+          var element = buildChips(template);
+          var ctrl = element.controller('mdChips');
+          var input = element.find('input');
+
+          expect(ctrl.shouldAddOnBlur()).toBeFalsy();
+
+          // Flush the initial timeout of the md-autocomplete.
+          $timeout.flush();
+
+          scope.$apply('searchText = "Hello"');
+
+          expect(ctrl.shouldAddOnBlur()).toBeFalsy();
+        });
+
+        it('should not append a new chip on blur when the autocomplete is showing', function() {
+          var template =
+            '<md-chips ng-model="items" md-add-on-blur="true">' +
+              '<md-autocomplete ' +
+                  'md-selected-item="selectedItem" ' +
+                  'md-search-text="searchText" ' +
+                  'md-items="item in querySearch(searchText)" ' +
+                  'md-item-text="item">' +
+                '<span md-highlight-text="searchText">{{item}}</span>' +
+              '</md-autocomplete>' +
+            '</md-chips>';
+
+          setupScopeForAutocomplete();
+
+          var element = buildChips(template);
+          var ctrl = element.controller('mdChips');
+          var input = element.find('input');
+
+          expect(ctrl.shouldAddOnBlur()).toBeFalsy();
+
+          // Flush the initial timeout of the md-autocomplete.
+          $timeout.flush();
+
+          var autocompleteCtrl = element.find('md-autocomplete').controller('mdAutocomplete');
+
+          // Open the dropdown by searching for a possible item and focusing the input.
+          scope.$apply('searchText = "Ki"');
+          autocompleteCtrl.focus();
+
+          expect(ctrl.shouldAddOnBlur()).toBeFalsy();
+        });
+
       });
 
       describe('when removable', function() {

src/components/chips/js/chipsController.js

@@ -534,20 +534,8 @@ 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);
+  if (this.shouldAddOnBlur()) {
+    this.appendChip(this.getChipBuffer().trim());
     this.resetChipBuffer();
   }
 };
@@ -602,6 +590,26 @@ MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {
   }
 };
 
+/**
+ * Whether the current chip buffer should be added on input blur or not.
+ * @returns {boolean}
+ */
+MdChipsCtrl.prototype.shouldAddOnBlur = function() {
+
+  // Update the custom ngModel validators from the chips component.
+  this.validateModel();
+
+  var chipBuffer = this.getChipBuffer().trim();
+  var isModelValid = this.ngModelCtrl.$valid;
+  var isAutocompleteShowing = this.autocompleteCtrl && !this.autocompleteCtrl.hidden;
+
+  if (this.userInputNgModelCtrl) {
+    isModelValid = isModelValid && this.userInputNgModelCtrl.$valid;
+  }
+
+  return this.addOnBlur && !this.requireMatch && chipBuffer && isModelValid && !isAutocompleteShowing;
+};
+
 MdChipsCtrl.prototype.hasFocus = function () {
   return this.inputHasFocus || this.selectedChip >= 0;
 };