Fix blur & focus behavior

Author: tinayuangao

src/lib/chips/chip-list.spec.ts

@@ -1,13 +1,8 @@
-<<<<<<< HEAD
 import {FocusKeyManager} from '@angular/cdk/a11y';
 import {createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component, DebugElement, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {
-  FormControl,
-  FormsModule,
-  ReactiveFormsModule,
-} from '@angular/forms';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {
   BACKSPACE,
   DELETE,

src/lib/chips/chip-list.ts

@@ -104,6 +104,9 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
   /** Subscription to focus changes in the chips. */
   private _chipFocusSubscription: Subscription|null;
 
+  /** Subscription to blur changes in the chips. */
+  private _chipBlurSubscription: Subscription|null;
+
   /** Subscription to selection changes in chips. */
   private _chipSelectionSubscription: Subscription|null;
 
@@ -277,6 +280,11 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
     return merge(...this.chips.map(chip => chip._onFocus));
   }
 
+  /** Combined stream of all of the child chips' blur change events. */
+  get chipBlurChanges(): Observable<MdChipEvent> {
+    return merge(...this.chips.map(chip => chip._onBlur));
+  }
+
   /** Combined stream of all of the child chips' remove change events. */
   get chipRemoveChanges(): Observable<MdChipEvent> {
     return merge(...this.chips.map(chip => chip.destroy));
@@ -649,6 +657,11 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
       this._chipFocusSubscription = null;
     }
 
+    if (this._chipBlurSubscription) {
+      this._chipBlurSubscription.unsubscribe();
+      this._chipBlurSubscription = null;
+    }
+
     if (this._chipSelectionSubscription) {
       this._chipSelectionSubscription.unsubscribe();
       this._chipSelectionSubscription = null;
@@ -687,6 +700,11 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
       }
       this.stateChanges.next();
     });
+
+    this._chipBlurSubscription = this.chipBlurChanges.subscribe(_ => {
+      this._blur();
+      this.stateChanges.next();
+    });
   }
 
   private _listenToChipsRemoved(): void {

src/lib/chips/chip.ts

@@ -9,11 +9,9 @@
 import {FocusableOption} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
-  ContentChild,
   Directive,
   ElementRef,
   EventEmitter,
-  forwardRef,
   Input,
   OnDestroy,
   Output,
@@ -77,7 +75,7 @@ export class MdBasicChip { }
     '(click)': '_handleClick($event)',
     '(keydown)': '_handleKeydown($event)',
     '(focus)': '_hasFocus = true',
-    '(blur)': '_hasFocus = false',
+    '(blur)': '_blur()',
   },
 
 })
@@ -130,6 +128,9 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
   /** Emits when the chip is focused. */
   _onFocus = new Subject<MdChipEvent>();
 
+  /** Emits when the chip is blured. */
+  _onBlur = new Subject<MdChipEvent>();
+
   /** Emitted when the chip is selected or deselected. */
   @Output() onSelectionChange = new EventEmitter<MdChipSelectionChange>();
 
@@ -233,6 +234,11 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
         break;
     }
   }
+
+  _blur() {
+    this._hasFocus = false;
+    this._onBlur.next({chip: this});
+  }
 }