Skip to content

Commit

Permalink
feat(chips): add user defined tab index to chip list (#6073)
Browse files Browse the repository at this point in the history
  • Loading branch information
tinayuangao authored and kara committed Aug 22, 2017
1 parent 154bb55 commit 9eb9ddf
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/demo-app/chips/chips-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
21 changes: 20 additions & 1 deletion src/lib/chips/chip-list.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}));
});
});
});
Expand Down Expand Up @@ -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)">
Expand All @@ -328,6 +346,7 @@ class StandardChipList {
remove: number;
chipSelect: (index?: number) => void = () => {};
chipDeselect: (index?: number) => void = () => {};
tabIndex: number = 0;
}

@Component({
Expand Down
16 changes: 14 additions & 2 deletions src/lib/chips/chip-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;

Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}

/**
Expand Down

0 comments on commit 9eb9ddf

Please sign in to comment.