From 6cfb542313eb2b14e147c62bcf5d3744cf63522c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 23 Aug 2016 19:43:54 +0200
Subject: [PATCH] fix(datepicker): forward tabindex to generated input (#9325)

Forwards the datepicker's tabindex to the generated input element, instead of making the wrapper element focusable.

Fixes #8147.
---
 .../datepicker/js/datepickerDirective.js      |  7 +++++--
 .../datepicker/js/datepickerDirective.spec.js | 21 +++++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/datepicker/js/datepickerDirective.js b/src/components/datepicker/js/datepickerDirective.js
index decdaf96fb3..20ad4213e26 100644
--- a/src/components/datepicker/js/datepickerDirective.js
+++ b/src/components/datepicker/js/datepickerDirective.js
@@ -331,8 +331,11 @@
     // Unless the user specifies so, the datepicker should not be a tab stop.
     // This is necessary because ngAria might add a tabindex to anything with an ng-model
     // (based on whether or not the user has turned that particular feature on/off).
-    if (!$attrs.tabindex) {
-      $element.attr('tabindex', '-1');
+    if ($attrs.tabindex) {
+      this.ngInputElement.attr('tabindex', $attrs.tabindex);
+      $attrs.$set('tabindex', null);
+    } else {
+      $attrs.$set('tabindex', '-1');
     }
 
     $mdTheming($element);
diff --git a/src/components/datepicker/js/datepickerDirective.spec.js b/src/components/datepicker/js/datepickerDirective.spec.js
index b00505e2bb6..bbe2d893a59 100644
--- a/src/components/datepicker/js/datepickerDirective.spec.js
+++ b/src/components/datepicker/js/datepickerDirective.spec.js
@@ -338,7 +338,7 @@ describe('md-datepicker', function() {
       expect(controller.ngModelCtrl.$modelValue).toEqual(initialDate);
     });
 
-    it('shoud become touched from bluring closing the pane', function() {
+    it('should become touched from blurring closing the pane', function() {
       populateInputElement('17/1/2015');
 
       controller.openCalendarPane({
@@ -349,7 +349,7 @@ describe('md-datepicker', function() {
       expect(controller.ngModelCtrl.$touched).toBe(true);
     });
 
-    it('should become touch from bluring the input', function() {
+    it('should become touch from blurring the input', function() {
       populateInputElement('17/1/2015');
 
       var input = angular.element(controller.inputElement);
@@ -768,4 +768,21 @@ describe('md-datepicker', function() {
       expect(pageScope.blurHandler).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('tabindex behavior', function() {
+    beforeEach(function() {
+      ngElement && ngElement.remove();
+    });
+
+    it('should remove the datepicker from the tab order, if no tabindex is specified', function() {
+      createDatepickerInstance('<md-datepicker ng-model="myDate"></md-datepicker>');
+      expect(ngElement.attr('tabindex')).toBe('-1');
+    });
+
+    it('should forward the tabindex to the input', function() {
+      createDatepickerInstance('<md-datepicker ng-model="myDate" tabindex="1"></md-datepicker>');
+      expect(ngElement.attr('tabindex')).toBeFalsy();
+      expect(controller.ngInputElement.attr('tabindex')).toBe('1');
+    });
+  });
 });