Move native input out of chip-list

Author: tinayuangao

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

@@ -46,18 +46,18 @@ <h4>Input Container</h4>
       </p>
 
       <md-input-container [floatPlaceholder]="people.length > 0 ? 'always' : 'auto'">
-        <md-chip-list #chipList>
+        <md-chip-list mdPrefix #chipList>
           <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>
-          <input mdInput placeholder="New Contributor..."
-                 [mdChipInputFor]="chipList"
-                 [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                 [mdChipInputAddOnBlur]="addOnBlur"
-                 (mdChipInputTokenEnd)="add($event)" />
         </md-chip-list>
+        <input mdInput mdChipInput placeholder="New Contributor..."
+               [mdChipInputFor]="chipList"
+               [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
+               [mdChipInputAddOnBlur]="addOnBlur"
+               (mdChipInputTokenEnd)="add($event)" />
       </md-input-container>
 
       <p>

src/lib/chips/chip-input.ts

@@ -1,6 +1,6 @@
 import {Directive, Output, EventEmitter, ElementRef, Input} from '@angular/core';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
-import {ENTER} from '../core/keyboard/keycodes';
+import {ENTER, BACKSPACE} from '../core/keyboard/keycodes';
 import {MdChipList} from './chip-list';
 
 export interface MdChipInputEvent {
@@ -9,7 +9,7 @@ export interface MdChipInputEvent {
 }
 
 @Directive({
-  selector: 'input[mdChipInputFor], input[matChipInputFor]',
+  selector: 'input[mdChipInput], input[matChipInput]',
   host: {
     'class': 'mat-chip-input',
     '(keydown)': '_keydown($event)',
@@ -81,6 +81,9 @@ 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 (!event || this.separatorKeyCodes.indexOf(event.keyCode) > -1) {
       this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });
 

src/lib/chips/chips.scss

@@ -13,6 +13,16 @@ $mat-chip-remove-size: 24px;
 $mat-chip-remove-font-size: 18px;
 
 @mixin chip-margin() {
+  [dir='rtl'] & {
+    margin: $mat-chip-margin;
+  }
+
+  [dir='ltr'] & {
+    margin: $mat-chip-margin;
+  }
+}
+
+@mixin chip-margin-last() {
   [dir='rtl'] & {
     margin-left: 0;
     margin-right: $mat-chip-margin;
@@ -24,7 +34,7 @@ $mat-chip-remove-font-size: 18px;
   }
 }
 
-@mixin chip-margin-reverse() {
+@mixin chip-margin-first() {
   [dir='ltr'] & {
     margin-left: 0;
     margin-right: $mat-chip-margin;
@@ -49,15 +59,18 @@ $mat-chip-remove-font-size: 18px;
     // Do not apply the special margins inside an input container
     // Remove the margin from the first element (in both LTR and RTL)
     &:first-child {
-      @include chip-margin-reverse();
+      @include chip-margin-first();
     }
 
     // Remove the margin from the last element (in both LTR and RTL)
     &:last-child {
-      @include chip-margin();
+      @include chip-margin-last();
     }
   }
+}
 
+.mat-input-container .mat-chip-list-wrapper .map-chip:last-child {
+  @include chip-margin();
 }
 
 .mat-input-prefix .mat-chip-list-wrapper {