feat(mdTextFloat): Adds support for custom tabindex

src/components/textField/textField.js

@@ -30,6 +30,7 @@ angular.module('material.components.textField', [
  * @param {string} label String value or expression that specifies the input text field label/hint.
  * @param {string=} type Optional value to define the type of input field. Defaults to string.
  * @param {string=} md-fid Optional attribute used for accessibility link pairing between the Label and Input elements
+ * @param {string=} tabindex Optional attribute to specify tab order.
  *
  * @usage
  * <hljs lang="html">
@@ -65,14 +66,18 @@ function mdTextFloatDirective($mdTheming, $mdUtil, $parse) {
           };
 
           scope.inputType = attrs.type || "text";
+
+          scope.tabIndex = attrs.tabindex || '0';
+
+          element.attr('tabindex', '-1');
         },
         post: $mdTheming
       };
     },
     template:
-    '<md-input-group tabindex="-1">' +
-    ' <label for="{{fid}}" >{{label}}</label>' +
-    ' <md-input id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
+    '<md-input-group>' +
+    ' <label for="{{fid}}">{{label}}</label>' +
+    ' <md-input tabIndex="{{tabIndex}}" id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
     '</md-input-group>'
   };
 }
@@ -142,9 +147,11 @@ function mdInputDirective($mdUtil) {
       var inputGroupCtrl = ctrls[0];
       var ngModelCtrl = ctrls[1];
 
+      var initialTabIndex = angular.isUndefined(attr.tabindex) ? 0 : attr.tabindex;
+
       scope.$watch(scope.isDisabled, function(isDisabled) {
         element.attr('aria-disabled', !!isDisabled);
-        element.attr('tabindex', !!isDisabled);
+        element.attr('tabindex', (isDisabled ? -1 : initialTabIndex));
       });
       element.attr('type', attr.type || element.parent().attr('type') || "text");
 

src/components/textField/textField.spec.js

@@ -77,6 +77,13 @@ describe('Text Field directives', function() {
       }
     });
 
+    it('should have a valid tabindex', function() {
+      var el = setupTextFloat( { tabIndex:"1" }, model);
+
+      expect(el.attr('tabindex')).toBe('-1');
+      expect(el.find('input').attr('tabIndex')).toBe('1');
+    });
+
     it('should set input type `password` properly', function() {
       var el = setupTextFloat( { type:"password" }, model);
       expect( el.find('input').attr('type')).toBe("password");
@@ -234,13 +241,14 @@ describe('Text Field directives', function() {
     md_text_float : '<md-text-float ' +
                 '   type="{{type}}" ' +
                 '   label="{{label}}" ' +
+                '   tabIndex="{{tabIndex}}"' +
                 '   ng-model="{{model}}" >' +
                 '</md-text-float>',
 
-    md_input_group: '<div class="md-input-group" tabindex="-1">' +
+    md_input_group: '<md-input-group tabIndex="-1">' +
                 ' <label>{{label}}</label>' +
-                ' <md-input id="{{id}}" type="{{type}}" ng-model="{{model}}"></md-input>' +
-                '</div>'
+                ' <md-input tabIndex="{{tabIndex}}" id="{{id}}" type="{{type}}" ng-model="{{model}}"></md-input>' +
+                '</md-input-group>'
   };
 
   /**