feat(text-field): Add focus API to component (#4020)

Author: kfranqueiro

packages/mdc-textfield/README.md

@@ -254,6 +254,7 @@ In addition to the above, the following properties proxy to the `input` element'
 
 Method Signature | Description
 --- | ---
+`focus() => void` | Focuses the `input` or `textarea` element.
 `layout() => void` | Adjusts the dimensions and positions for all sub-elements.
 
 ## Usage Within Frameworks

packages/mdc-textfield/index.js

@@ -369,6 +369,13 @@ class MDCTextField extends MDCComponent {
     this.foundation_.setUseNativeValidation(useNativeValidation);
   }
 
+  /**
+   * Focuses the input element.
+   */
+  focus() {
+    this.input_.focus();
+  }
+
   /**
    * Recomputes the outline SVG path for the outline element.
    */

test/unit/mdc-textfield/mdc-text-field.test.js

@@ -270,6 +270,15 @@ test('#initialSyncWithDom sets disabled if input element is not disabled', () =>
   assert.isNotOk(component.disabled);
 });
 
+test('#focus calls focus on the input element', () => {
+  const {root, component} = setupTest();
+  const input = root.querySelector('.mdc-text-field__input');
+  input.focus = td.func('focus');
+  component.focus();
+
+  td.verify(input.focus(), {times: 1});
+});
+
 test('get/set disabled updates the input element', () => {
   const {root, component} = setupTest();
   const input = root.querySelector('.mdc-text-field__input');