error inside onInputBlur, when using md-chips with md-autocomplete

[ex37]

Actual Behavior:

• What is the issue? * Click inside the chips input. Then click outside to blur. It throws an error.
• What is the expected behavior? shouldn't throw error on blur

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/ex37/pen/jrQkvr
• Details: This demo is a part of Angular Material's documentation. This problem was introduced in version 1.1.1, and was not there before.

Angular Versions: *

• Angular Version: 1.5.6
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 54.0.2840.59 (64-bit)
• OS: * macOS Sierra
• Stack Traces:

angular-material.min.js:14 Uncaught TypeError: Cannot read property 'trim' of null(…)
e.onInputBlur   @   angular-material.min.js:14
(anonymous function)    @   angular.js:1256
Qf  @   angular.js:3456
d   @   angular.js:3444

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[ex37]

A possible solution is to change line https://github.com/angular/material/blob/master/src/components/chips/js/chipsController.js#L534 to

var chipBuffer = this.getChipBuffer();
chipBuffer = chipBuffer && chipBuffer.trim();

A similar problem is possibly on this line, https://github.com/angular/material/blob/master/src/components/chips/js/chipsController.js#L153
trim is done when appending, but it should be done before this check

if ((this.autocompleteCtrl && this.requireMatch) || !chipBuffer) return;

Another thing I was thinking about, the logic of using trim() assumes, that only a string value can be returned by the chipBuffer function. I am not sure if it's always like that. Another thing is, if this is something returned by the input's ngModel, then it is always trimmed by default in angular, so no need to trim at all.

[LabN36]

@ex37 I'm facing the similar problem what changes do i have to do ?

[ex37]

@LabN36 you can find their fix here: 4c0c7f9

in short, replace code for MdChipsCtrl.prototype.getChipBuffer with this

MdChipsCtrl.prototype.getChipBuffer = function() {
  var chipBuffer =  !this.userInputElement ? this.chipBuffer :
                     this.userInputNgModelCtrl ? this.userInputNgModelCtrl.$viewValue :
                     this.userInputElement[0].value;

  // Ensure that the chip buffer is always a string. For example, the input element buffer might be falsy.
  return angular.isString(chipBuffer) ? chipBuffer : '';
};

[LabN36]

Thanks Very much it's fixed 👍