Sync and rebase & fix test

Author: tinayuangao

src/demo-app/chips/chips-demo.html

@@ -45,16 +45,39 @@ <h4>Input Container</h4>
         <code>&lt;md-input-container&gt;</code>.
       </p>
 
-      <md-input-container [floatPlaceholder]="people.length > 0 ? 'always' : 'auto'">
-        <md-chip-list mdPrefix #chipList>
+
+      <md-input-container>
+        <md-chip-list mdPrefix #chipList1>
           <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (remove)="remove(person)">
             {{person.name}}
             <md-icon mdChipRemove>cancel</md-icon>
           </md-chip>
         </md-chip-list>
-        <input mdInput mdChipInput placeholder="New Contributor..."
-               [mdChipInputFor]="chipList"
+        <input mdInput placeholder="New Contributor..."
+               [mdChipInputFor]="chipList1"
+               [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
+               [mdChipInputAddOnBlur]="addOnBlur"
+               (mdChipInputTokenEnd)="add($event)" />
+      </md-input-container>
+
+
+
+      <p>
+        You can also put <code>&lt;md-input-container&gt;</code> outside of an <code>md-chip-list</code>.
+        With <code>mdChipInput</code> the input work with chip-list
+      </p>
+
+      <md-chip-list #chipList2>
+        <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+                 [removable]="removable" (remove)="remove(person)">
+          {{person.name}}
+          <md-icon mdChipRemove>cancel</md-icon>
+        </md-chip>
+      </md-chip-list>
+      <md-input-container>
+        <input mdInput placeholder="New Contributor..."
+               [mdChipInputFor]="chipList2"
                [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [mdChipInputAddOnBlur]="addOnBlur"
                (mdChipInputTokenEnd)="add($event)" />

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

@@ -3,7 +3,7 @@ import {MdChipsModule} from './index';
 import {Component, DebugElement} from '@angular/core';
 import {MdChipInput, MdChipInputEvent} from './chip-input';
 import {By} from '@angular/platform-browser';
-import {Dir} from '../core/rtl/dir';
+import {Directionality} from '../core';
 import {createKeyboardEvent} from '../core/testing/event-objects';
 
 import {ENTER, COMMA} from '../core/keyboard/keycodes';
@@ -22,7 +22,7 @@ describe('MdChipInput', () => {
       imports: [MdChipsModule],
       declarations: [TestChipInput],
       providers: [{
-        provide: Dir, useFactory: () => {
+        provide: Directionality, useFactory: () => {
           return {value: dir.toLowerCase()};
         }
       }]
@@ -101,18 +101,18 @@ describe('MdChipInput', () => {
 
 @Component({
   template: `
-    <md-chip-list>
-        <input mdInput mdChipInputFor
+    <md-chip-list #chipList>
+    </md-chip-list>
+    <input mdInput [mdChipInputFor]="chipList"
               [mdChipInputAddOnBlur]="addOnBlur"
               [mdChipInputSeparatorKeyCodes]="separatorKeys"
               (mdChipInputTokenEnd)="add($event)" />
-    </md-chip-list>
   `
 })
 class TestChipInput {
   addOnBlur: boolean = false;
   separatorKeys: number[] = [ENTER];
 
-  add(event: MdChipInputEvent) {
+  add(_: MdChipInputEvent) {
   }
 }

src/lib/chips/chip-input.ts

@@ -1,6 +1,14 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 import {Directive, Output, EventEmitter, ElementRef, Input} from '@angular/core';
-import {coerceBooleanProperty} from '../core/coercion/boolean-property';
-import {ENTER, BACKSPACE} from '../core/keyboard/keycodes';
+import {coerceBooleanProperty} from '@angular/cdk';
+import {ENTER} from '../core/keyboard/keycodes';
 import {MdChipList} from './chip-list';
 
 export interface MdChipInputEvent {
@@ -9,7 +17,7 @@ export interface MdChipInputEvent {
 }
 
 @Directive({
-  selector: 'input[mdChipInput], input[matChipInput]',
+  selector: 'input[mdChipInputFor], input[matChipInputFor]',
   host: {
     'class': 'mat-chip-input',
     '(keydown)': '_keydown($event)',
@@ -81,8 +89,8 @@ export class MdChipInput {
 
   /** Checks to see if the (chipEnd) event needs to be emitted. */
   _emitChipEnd(event?: KeyboardEvent) {
-    if (!this._inputElement.value && !!event && event.keyCode == BACKSPACE) {
-      this._chipList.chips.last.focus();
+    if (!this._inputElement.value && !!event) {
+      this._chipList._keydown(event);
     }
     if (!event || this.separatorKeyCodes.indexOf(event.keyCode) > -1) {
       this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });

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

@@ -9,7 +9,7 @@ import {createKeyboardEvent} from '@angular/cdk/testing';
 
 import {MdInputModule} from '../input/index';
 import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, SPACE, TAB} from '../core/keyboard/keycodes';
-import {Dir} from '../core/rtl/dir';
+import {Directionality} from '../core';
 
 describe('MdChipList', () => {
   let fixture: ComponentFixture<any>;
@@ -29,7 +29,7 @@ describe('MdChipList', () => {
         StandardChipList, InputContainerChipList
       ],
       providers: [{
-        provide: Dir, useFactory: () => {
+        provide: Directionality, useFactory: () => {
           return {value: dir.toLowerCase()};
         }
       }]
@@ -83,20 +83,6 @@ describe('MdChipList', () => {
         expect(manager.activeItemIndex).toBe(lastIndex);
       });
 
-
-      it('should focus the previous item', () => {
-        // Focus the last item by fake updating the _hasFocus state for unit tests.
-        lastItem._hasFocus = true;
-
-        // Destroy the last item
-        testComponent.remove = lastIndex;
-
-        lastItem.focus();
-        fixture.detectChanges();
-
-        expect(manager.activeItemIndex).toBe(lastIndex);
-      });
-
       describe('on chip destroy', () => {
         it('should focus the next item', () => {
           let array = chips.toArray();
@@ -268,7 +254,7 @@ describe('MdChipList', () => {
 
           // Focus the input
           nativeInput.focus();
-          expect(manager.activeItemIndex).toBeFalsy();
+          expect(manager.activeItemIndex).toBe(-1);
 
           // Press the DELETE key
           chipListInstance._keydown(DELETE_EVENT);
@@ -285,7 +271,7 @@ describe('MdChipList', () => {
 
           // Focus the input
           nativeInput.focus();
-          expect(manager.activeItemIndex).toBeFalsy();
+          expect(manager.activeItemIndex).toBe(-1);
 
           // Press the BACKSPACE key
           chipListInstance._keydown(BACKSPACE_EVENT);
@@ -351,8 +337,8 @@ class StandardChipList {
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
-        <input mdInput name="test" [mdChipInputFor]="chipList"/>
       </md-chip-list>
+      <input mdInput name="test" [mdChipInputFor]="chipList"/>
     </md-input-container>
   `
 })

src/lib/chips/chip-list.ts

@@ -11,11 +11,11 @@ import {
   ChangeDetectionStrategy,
   Component,
   ContentChildren,
-  Directive,
   Input,
   QueryList,
   ViewEncapsulation,
   OnDestroy,
+  Optional,
   ElementRef,
   Renderer2,
 } from '@angular/core';
@@ -24,7 +24,8 @@ import {MdChip} from './chip';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
 import {SPACE, LEFT_ARROW, RIGHT_ARROW} from '../core/keyboard/keycodes';
 import {Subscription} from 'rxjs/Subscription';
-import {coerceBooleanProperty} from '@angular/cdk';
+import {coerceBooleanProperty, Directionality} from '@angular/cdk';
+import {Subscription} from 'rxjs/Subscription';
 
 /** Utility to check if an input element has no value. */
 function _isInputEmpty(element: HTMLElement): boolean {
@@ -56,7 +57,7 @@ function _isInputEmpty(element: HTMLElement): boolean {
     'role': 'listbox',
     'class': 'mat-chip-list',
 
-    '(focus)': 'focus($event)',
+    '(focus)': 'focus()',
     '(keydown)': '_keydown($event)'
   },
   queries: {
@@ -69,7 +70,7 @@ function _isInputEmpty(element: HTMLElement): boolean {
 export class MdChipList implements AfterContentInit, OnDestroy {
 
   /** When a chip is destroyed, we track the index so we can focus the appropriate next chip. */
-  protected _lastDestroyedIndex: number = null;
+  protected _lastDestroyedIndex: number|null = null;
 
   /** Track which chips we're listening to for focus/destruction. */
   protected _chipSet: WeakMap<MdChip, boolean> = new WeakMap();
@@ -92,7 +93,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
   chips: QueryList<MdChip>;
 
   constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef,
-              protected _dir: Dir) {
+              @Optional() private _dir: Directionality) {
   }
 
   ngAfterContentInit(): void {
@@ -153,7 +154,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
    * Focuses the the first non-disabled chip in this chip list, or the associated input when there
    * are no eligible chips.
    */
-  focus(event?: Event) {
+  focus() {
     // TODO: ARIA says this should focus the first `selected` chip if any are selected.
     if (this.chips.length > 0) {
       this._keyManager.setFirstItemActive();
@@ -176,7 +177,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     let code = event.keyCode;
     let target = event.target as HTMLElement;
     let isInputEmpty = _isInputEmpty(target);
-    let isRtl = this._dir.value == 'rtl';
+    let isRtl = this._dir && this._dir.value == 'rtl';
 
     let isPrevKey = (code == (isRtl ? RIGHT_ARROW : LEFT_ARROW));
     let isNextKey = (code == (isRtl ? LEFT_ARROW : RIGHT_ARROW));
@@ -254,15 +255,19 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     // On destroy, remove the item from our list, and setup our destroyed focus check
     chip.destroy.subscribe(() => {
       let chipIndex: number = this.chips.toArray().indexOf(chip);
-
-      if (this._isValidIndex(chipIndex) && chip._hasFocus) {
-        // Check whether the chip is the last item
-        if (chipIndex < this.chips.length - 1) {
-          this._keyManager.setActiveItem(chipIndex);
-        } else if (chipIndex - 1 >= 0) {
-          this._keyManager.setActiveItem(chipIndex - 1);
+      if (this._isValidIndex(chipIndex)) {
+        if (chip._hasFocus) {
+          // Check whether the chip is the last item
+          if (chipIndex < this.chips.length - 1) {
+            this._keyManager.setActiveItem(chipIndex);
+          } else if (chipIndex - 1 >= 0) {
+            this._keyManager.setActiveItem(chipIndex - 1);
+          }
         }
-        this._lastDestroyedIndex = chipIndex;
+        if (this._keyManager.activeItemIndex == chipIndex) {
+          this._lastDestroyedIndex = chipIndex;
+        }
+
       }
 
       this._chipSet.delete(chip);
@@ -278,12 +283,12 @@ export class MdChipList implements AfterContentInit, OnDestroy {
    */
   protected _updateFocusForDestroyedChips() {
     let chipsArray = this.chips;
-    let focusChip: MdChip;
 
     if (this._lastDestroyedIndex != null && chipsArray.length > 0) {
       // Check whether the destroyed chip was the last item
       const newFocusIndex = Math.min(this._lastDestroyedIndex, chipsArray.length - 1);
       this._keyManager.setActiveItem(newFocusIndex);
+      let focusChip = this._keyManager.activeItem;
 
       // Focus the chip
       if (focusChip) {

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

@@ -31,13 +31,13 @@ describe('Chip Remove', () => {
 
   describe('basic behavior', () => {
     it('should applies the `mat-chip-remove` CSS class', () => {
-      let hrefElement = chipNativeElement.querySelector('a');
+      let hrefElement = chipNativeElement.querySelector('a')!;
 
       expect(hrefElement.classList).toContain('mat-chip-remove');
     });
 
     it('should emits (remove) on click', () => {
-      let hrefElement = chipNativeElement.querySelector('a');
+      let hrefElement = chipNativeElement.querySelector('a')!;
 
       testChip.removable = true;
       fixture.detectChanges();
@@ -50,7 +50,7 @@ describe('Chip Remove', () => {
     });
 
     it(`should monitors the parent chip's [removable] property`, () => {
-      let hrefElement = chipNativeElement.querySelector('a');
+      let hrefElement = chipNativeElement.querySelector('a')!;
 
       testChip.removable = true;
       fixture.detectChanges();

src/lib/chips/chip.spec.ts

@@ -4,7 +4,7 @@ import {By} from '@angular/platform-browser';
 import {MdChipList, MdChip, MdChipEvent, MdChipsModule} from './index';
 import {SPACE, DELETE, BACKSPACE} from '../core/keyboard/keycodes';
 import {createKeyboardEvent} from '../core/testing/event-objects';
-import {Dir} from '../core/rtl/dir';
+import {Directionality} from '../core';
 
 describe('Chips', () => {
   let fixture: ComponentFixture<any>;
@@ -22,7 +22,7 @@ describe('Chips', () => {
         BasicChip, SingleChip
       ],
       providers: [{
-        provide: Dir, useFactory: () => {
+        provide: Directionality, useFactory: () => {
           return {value: dir};
         }
       }]
@@ -64,7 +64,7 @@ describe('Chips', () => {
       chipDebugElement = fixture.debugElement.query(By.directive(MdChip));
       chipListNativeElement = fixture.debugElement.query(By.directive(MdChipList)).nativeElement;
       chipNativeElement = chipDebugElement.nativeElement;
-      chipInstance = chipDebugElement.componentInstance;
+      chipInstance = chipDebugElement.injector.get(MdChip);
       testComponent = fixture.debugElement.componentInstance;
 
       document.body.appendChild(chipNativeElement);