feat(chips): add user defined tab index to chip list (#6073)

Author: tinayuangao

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

@@ -102,7 +102,7 @@ <h4>Stacked Chips</h4>
         <code>(focus)</code> event to run custom code.
       </p>
 
-      <md-chip-list class="mat-chip-list-stacked">
+      <md-chip-list class="mat-chip-list-stacked" [tabIndex]="-1">
         <md-chip *ngFor="let aColor of availableColors"
                  (focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
           {{aColor.name}}

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

@@ -230,6 +230,24 @@ describe('MdChipList', () => {
 
           expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
         }));
+
+        it(`should use user defined tabIndex`, fakeAsync(() => {
+          chipListInstance.tabIndex = 4;
+
+          fixture.detectChanges();
+
+          expect(chipListInstance._tabIndex)
+            .toBe(4, 'Expected tabIndex to be set to user defined value 4.');
+
+          chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
+
+          expect(chipListInstance._tabIndex)
+            .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+
+          tick();
+
+          expect(chipListInstance._tabIndex).toBe(4, 'Expected tabIndex to be reset back to 4');
+        }));
       });
     });
   });
@@ -312,7 +330,7 @@ describe('MdChipList', () => {
 
 @Component({
   template: `
-    <md-chip-list>
+    <md-chip-list [tabIndex]="tabIndex">
       <div *ngFor="let i of [0,1,2,3,4]">
        <div *ngIf="remove != i">
           <md-chip (select)="chipSelect(i)" (deselect)="chipDeselect(i)">
@@ -328,6 +346,7 @@ class StandardChipList {
   remove: number;
   chipSelect: (index?: number) => void = () => {};
   chipDeselect: (index?: number) => void = () => {};
+  tabIndex: number = 0;
 }
 
 @Component({

src/lib/chips/chip-list.ts

@@ -76,6 +76,12 @@ export class MdChipList implements AfterContentInit, OnDestroy {
   /** Tab index for the chip list. */
   _tabIndex = 0;
 
+  /**
+   * User defined tab index.
+   * When it is not null, use user defined tab index. Otherwise use _tabIndex
+   */
+  _userTabIndex: number | null = null;
+
   /** The FocusKeyManager which handles focus. */
   _keyManager: FocusKeyManager<MdChip>;
 
@@ -93,7 +99,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     // it back to the first chip when the user tabs out.
     this._tabOutSubscription = this._keyManager.tabOut.subscribe(() => {
       this._tabIndex = -1;
-      setTimeout(() => this._tabIndex = 0);
+      setTimeout(() => this._tabIndex = this._userTabIndex || 0);
     });
 
     // Go ahead and subscribe all of the initial chips
@@ -138,6 +144,12 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     this._selectable = coerceBooleanProperty(value);
   }
 
+  @Input()
+  set tabIndex(value: number) {
+    this._userTabIndex = value;
+    this._tabIndex = value;
+  }
+
   /** Associates an HTML input element with this chip list. */
   registerInput(inputElement: HTMLInputElement) {
     this._inputElement = inputElement;
@@ -212,7 +224,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
    */
   protected _updateTabIndex(): void {
     // If we have 0 chips, we should not allow keyboard focus
-    this._tabIndex = (this.chips.length === 0 ? -1 : 0);
+    this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0);
   }
 
   /**