fix(chips): unwanted re-focus of last chip after blur

this solves a regression introduced in 1.1.2 by #9650
change `ng-change` demo to use `$log` instead of `alert`
fix some lint line length warnings
JSDoc clean up

Fixes #10758

src/components/chips/demoBasicUsage/index.html

@@ -20,22 +20,23 @@ <h2 class="md-title">Use a custom chip template.</h2>
     <br/>
     <h2 class="md-title">Use the default chip template.</h2>
 
-    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable"></md-chips>
+    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable">
+    </md-chips>
 
     <br/>
-    <h2 class="md-title">Use ng-change</h2>
+    <h2 class="md-title">Use ng-change and add-on-blur</h2>
 
-    <md-chips ng-model="ctrl.ngChangeFruitNames" ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)" 
-      md-removable="ctrl.removable"></md-chips>
+    <md-chips ng-model="ctrl.ngChangeFruitNames" md-add-on-blur="true"
+              ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)"
+              md-removable="ctrl.removable"></md-chips>
 
     <br/>
     <h2 class="md-title">Make chips editable.</h2>
 
-    <md-chips ng-model="ctrl.editableFruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable"
-              md-enable-chip-edit="true"></md-chips>
+    <md-chips ng-model="ctrl.editableFruitNames" readonly="ctrl.readonly"
+              md-removable="ctrl.removable" md-enable-chip-edit="true"></md-chips>
 
     <br/>
-
     <h2 class="md-title">Use Placeholders and override hint texts.</h2>
 
     <md-chips

src/components/chips/demoBasicUsage/readme.html

@@ -3,8 +3,7 @@
   <code>md-chips</code> component. In order to achieve this, the behavior has changed to also select
   and highlight the newly appended chip for <code>300ms</code> before re-focusing the text input.
 </p>
-
 <p>
   Please see the <a href="api/directive/mdChips">documentation</a> for more information and for
   the new <code>md-chip-append-delay</code> option which allows you to customize this delay.
-</p>
+</p>

src/components/chips/demoBasicUsage/script.js

@@ -7,7 +7,7 @@
       }])
       .controller('BasicDemoCtrl', DemoCtrl);
 
-  function DemoCtrl ($timeout, $q) {
+  function DemoCtrl ($timeout, $q, $log) {
     var self = this;
 
     self.readonly = false;
@@ -42,7 +42,7 @@
     };
 
     self.onModelChange = function(newModel) {
-      alert('The model has changed');
+      $log.log('The model has changed to ' + newModel + '.');
     };
   }
 })();

src/components/chips/js/chipsController.js

@@ -446,8 +446,7 @@ MdChipsCtrl.prototype.resetSelectedChip = function() {
  * determined as the next chip in the list, unless the target chip is the
  * last in the list, then it is the chip immediately preceding the target. If
  * there is only one item in the list, -1 is returned (select none).
- * The number returned is the index to select AFTER the target has been
- * removed.
+ * The number returned is the index to select AFTER the target has been removed.
  * If the current chip is not selected, then -1 is returned to select none.
  */
 MdChipsCtrl.prototype.getAdjacentChipIndex = function(index) {
@@ -462,7 +461,7 @@ MdChipsCtrl.prototype.getAdjacentChipIndex = function(index) {
  * @param {string} newChip chip buffer contents that will be used to create the new chip
  */
 MdChipsCtrl.prototype.appendChip = function(newChip) {
-  this.shouldFocusLastChip = true;
+  this.shouldFocusLastChip = !this.addOnBlur;
   if (this.useTransformChip && this.transformChip) {
     var transformedChip = this.transformChip({'$chip': newChip});
 
@@ -716,7 +715,9 @@ MdChipsCtrl.prototype.selectAndFocusChip = function(index) {
  * Call `focus()` on the chip at `index`
  */
 MdChipsCtrl.prototype.focusChip = function(index) {
-  var chipContent = this.$element[0].querySelector('md-chip[index="' + index + '"] .md-chip-content');
+  var chipContent = this.$element[0].querySelector(
+    'md-chip[index="' + index + '"] .md-chip-content'
+  );
 
   this.ariaTabIndex = index;
 
@@ -857,8 +858,7 @@ MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {
 };
 
 /**
- * Whether the current chip buffer should be added on input blur or not.
- * @returns {boolean}
+ * @returns {boolean} Whether the current chip buffer should be added on input blur or not.
  */
 MdChipsCtrl.prototype.shouldAddOnBlur = function() {
 
@@ -869,14 +869,16 @@ MdChipsCtrl.prototype.shouldAddOnBlur = function() {
   // If the model value is empty and required is set on the element, then the model will be invalid.
   // In that case, we still want to allow adding the chip. The main (but not only) case we want
   // to disallow is adding a chip on blur when md-max-chips validation fails.
-  var isModelValid = this.ngModelCtrl.$isEmpty(this.ngModelCtrl.$modelValue) || this.ngModelCtrl.$valid;
+  var isModelValid = this.ngModelCtrl.$isEmpty(this.ngModelCtrl.$modelValue) ||
+    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;
+  return this.addOnBlur && !this.requireMatch && chipBuffer && isModelValid &&
+    !isAutocompleteShowing;
 };
 
 MdChipsCtrl.prototype.hasFocus = function () {