Merge pull request #1873 from google/garbee/feature/textfield-autofocus

Textfield can autofocus.

src/textfield/textfield.js

@@ -85,7 +85,7 @@
    * @private
    */
   MaterialTextfield.prototype.onFocus_ = function(event) {
-    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    this.checkFocus();
   };
 
   /**
@@ -137,6 +137,19 @@
   MaterialTextfield.prototype['checkDisabled'] =
       MaterialTextfield.prototype.checkDisabled;
 
+  /**
+  * Check the focus state and update field accordingly.
+  *
+  * @public
+  */
+  MaterialTextfield.prototype.checkFocus = function() {
+    if (document.activeElement === this.input_) {
+      this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    }
+  };
+  MaterialTextfield.prototype['checkFocus'] =
+    MaterialTextfield.prototype.checkFocus;
+
   /**
    * Check the validity state and update field accordingly.
    *
@@ -260,6 +273,10 @@
         if (invalid) {
           this.element_.classList.add(this.CssClasses_.IS_INVALID);
         }
+        if (this.input_.hasAttribute('autofocus')) {
+          this.element_.focus();
+          this.checkFocus();
+        }
       }
     }
   };

test/unit/textfield.js

@@ -70,10 +70,18 @@ describe('MaterialTextfield', function () {
   });
 
   it('should be invalid after upgrade if invalid previously', function () {
-    var el = createSingleLineTextfield()
+    var el = createSingleLineTextfield();
     el.classList.add('is-invalid');
     componentHandler.upgradeElement(el);
     expect(el.classList.contains('is-invalid')).to.equal(true);
   });
 
+  it('should focus with an autofocus attribute', function () {
+    var el = createSingleLineTextfield();
+    el.querySelector('input').setAttribute('autofocus', '');
+    document.body.appendChild(el);
+    componentHandler.upgradeElement(el);
+    expect(el.classList.contains('is-focused')).to.equal(true);
+    document.body.removeChild(el);
+  });
 });