Unexpected "focus"/"blur" handling for md-chips containing md-autocomplete

[stephenwan]

The issue exists in the latest release (v0.10.0) and previous releases ( < 0.9.x). It can be seen on the demo page of the ng-material website (https://material.angularjs.org/latest/#/demo/material.components.chips).

Symptom

1. Goto the example for Use md-autocomplete to build an ordered set of chips. under the Custom Inputs section in Demo for Chips.
2. Focus the input element by clicking it.
3. Expect to see the input element with blue underline. But no blue underline is shown.
4. Click somewhere else to blur the input.
5. Expected to see no blue underline, but blue underline is shown.

Possible cause

The code below is from chipsController.js

MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {
  ctrl.registerSelectedItemWatcher(angular.bind(this, function (item) {
    if (item) {
      this.appendChip(item);
      this.resetChipBuffer();
    }
  }));
  this.$element.find('input')
      .on('focus',angular.bind(this, this.onInputFocus) )
      .on('blur', angular.bind(this, this.onInputBlur) );
};

I suspect the callbacks for focus and blur are invoked outside angular's digest loop. Some scope.$apply() thing should be used here.

On the other hand, md-input has the correct behavior because its callbacks are registered through ng-focus and ng-blur inside the template instead of manually setting up the event listeners.

[marcysutton]

This is a duplicate of #2607.