From 9eb9ddfad06d1d2060db4dbaba01e4eb0c7ec283 Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Tue, 22 Aug 2017 14:09:47 -0700
Subject: [PATCH] feat(chips): add user defined tab index to chip list (#6073)

---
 src/demo-app/chips/chips-demo.html |  2 +-
 src/lib/chips/chip-list.spec.ts    | 21 ++++++++++++++++++++-
 src/lib/chips/chip-list.ts         | 16 ++++++++++++++--
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html
index 15fb7dea6e8..860caedb0c2 100644
--- a/src/demo-app/chips/chips-demo.html
+++ b/src/demo-app/chips/chips-demo.html
@@ -102,7 +102,7 @@
         <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}}
diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts
index 256ee5f3664..c069178ca49 100644
--- a/src/lib/chips/chip-list.spec.ts
+++ b/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({
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts
index dac3bb0c0bb..a693b3cca20 100644
--- a/src/lib/chips/chip-list.ts
+++ b/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);
   }
 
   /**