fix: allow use of tabindex

angular · Mar 9, 2017 · 94be467 · 94be467
1 parent 934be6f
commit 94be467
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
@@ -42,7 +42,8 @@ describe('MdSelect', () => {
         SelectWithErrorSibling,
         ThrowsErrorOnInit,
         BasicSelectOnPush,
-        BasicSelectOnPushPreselected
+        BasicSelectOnPushPreselected,
+        SelectWithPlainTabindex
       ],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
@@ -1092,6 +1093,17 @@ describe('MdSelect', () => {
         expect(select.getAttribute('tabindex')).toBe('3');
       });
 
+      it('should be able to set the tabindex via the native attribute', () => {
+        fixture.destroy();
+
+        const plainTabindexFixture = TestBed.createComponent(SelectWithPlainTabindex);
+
+        plainTabindexFixture.detectChanges();
+        select = plainTabindexFixture.debugElement.query(By.css('md-select')).nativeElement;
+
+        expect(select.getAttribute('tabindex')).toBe('5');
+      });
+
       it('should set aria-required for required selects', () => {
         expect(select.getAttribute('aria-required'))
           .toEqual('false', `Expected aria-required attr to be false for normal selects.`);
@@ -1873,6 +1885,14 @@ class MultiSelect {
   @ViewChildren(MdOption) options: QueryList<MdOption>;
 }
 
+@Component({
+  selector: 'select-with-plain-tabindex',
+  template: `
+    <md-select tabindex="5"></md-select>
+  `
+})
+class SelectWithPlainTabindex { }
+
 
 class FakeViewportRuler {
   getViewportRect() {

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -14,6 +14,7 @@ import {
   ViewEncapsulation,
   ViewChild,
   ChangeDetectorRef,
+  Attribute,
 } from '@angular/core';
 import {MdOption, MdOptionSelectionChange} from '../core/option/option';
 import {ENTER, SPACE} from '../core/keyboard/keycodes';
@@ -152,7 +153,7 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   private _placeholderState = '';
 
   /** Tab index for the element. */
-  private _tabIndex: number = 0;
+  private _tabIndex: number;
 
   /**
    * The width of the trigger. Must be saved to set the min width of the overlay panel
@@ -294,10 +295,13 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
 
   constructor(private _element: ElementRef, private _renderer: Renderer,
               private _viewportRuler: ViewportRuler, private _changeDetectorRef: ChangeDetectorRef,
-              @Optional() private _dir: Dir, @Self() @Optional() public _control: NgControl) {
+              @Optional() private _dir: Dir, @Self() @Optional() public _control: NgControl,
+              @Attribute('tabindex') tabIndex: string) {
     if (this._control) {
       this._control.valueAccessor = this;
     }
+
+    this._tabIndex = parseInt(tabIndex) || 0;
   }
 
   ngAfterContentInit() {