fix(textfield): added isFocused to adapter incase autofocus attr is present

demos/text-field.html

@@ -74,7 +74,7 @@
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
         <div class="mdc-text-field">
-          <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
+          <input type="text" class="mdc-text-field__input" aria-controls="my-text-field-helper-text">
           <label for="my-text-field" class="mdc-text-field__label">Text Field</label>
           <div class="mdc-text-field__bottom-line"></div>
         </div>
@@ -90,7 +90,7 @@
         <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
         <section id="demo-text-field-wrapper">
           <div class="mdc-text-field">
-            <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
+            <input type="text" class="mdc-text-field__input" aria-controls="my-text-field-helper-text">
             <label for="my-text-field" class="mdc-text-field__label">Email Address</label>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
@@ -177,6 +177,10 @@ <h2>Outlined Text Field</h2>
           <input id="outlined-rtl" type="checkbox">
           <label for="outlined-rtl">RTL</label>
         </div>
+        <div>
+          <input id="outlined-dark-theme" type="checkbox">
+          <label for="outlined-dark-theme">Dark Theme</label>
+        </div>
         <script>
           setTimeout(function() {
             var tfEl = document.getElementById('tf-outlined-example');
@@ -193,6 +197,9 @@ <h2>Outlined Text Field</h2>
               }
               tf.layout();
             });
+            document.getElementById('outlined-dark-theme').addEventListener('change', function(evt) {
+              wrapper.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
+            });
           }, 0);
         </script>
       </section>

packages/mdc-ripple/foundation.js

@@ -463,6 +463,7 @@ class MDCRippleFoundation extends MDCFoundation {
     }
     this.layoutFrame_ = requestAnimationFrame(() => {
       this.layoutInternal_();
+
       this.layoutFrame_ = 0;
     });
   }

packages/mdc-textfield/adapter.js

@@ -128,6 +128,13 @@ class MDCTextFieldAdapter {
    */
   getIdleOutlineStyleValue(propertyName) {}
 
+  /**
+   * Returns true if the textfield is focused.
+   * We achieve this via `document.activeElement === this.root_`.
+   * @return {boolean}
+   */
+  isFocused() {}
+
   /**
    * Returns true if the direction of the root element is set to RTL.
    * @return {boolean}

packages/mdc-textfield/foundation.js

@@ -59,6 +59,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
       deregisterBottomLineEventHandler: () => {},
       getNativeInput: () => {},
       getIdleOutlineStyleValue: () => {},
+      isFocused: () => {},
       isRtl: () => {},
     });
   }
@@ -109,6 +110,10 @@ class MDCTextFieldFoundation extends MDCFoundation {
       this.label_.floatAbove();
     }
 
+    if (this.adapter_.isFocused()) {
+      this.inputFocusHandler_();
+    }
+
     this.adapter_.registerInputInteractionHandler('focus', this.inputFocusHandler_);
     this.adapter_.registerInputInteractionHandler('blur', this.inputBlurHandler_);
     this.adapter_.registerInputInteractionHandler('input', this.inputInputHandler_);

packages/mdc-textfield/index.js

@@ -220,6 +220,9 @@ class MDCTextField extends MDCComponent {
             return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
           }
         },
+        isFocused: () => {
+          return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
+        },
         isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
       },
       this.getInputAdapterMethods_())),

test/unit/mdc-textfield/foundation.test.js

@@ -39,7 +39,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
     'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
     'registerBottomLineEventHandler', 'deregisterBottomLineEventHandler',
-    'getNativeInput', 'getIdleOutlineStyleValue', 'isRtl',
+    'getNativeInput', 'getIdleOutlineStyleValue', 'isFocused', 'isRtl',
   ]);
 });
 
@@ -157,6 +157,20 @@ test('#init adds mdc-text-field--upgraded class', () => {
   td.verify(mockAdapter.addClass(cssClasses.UPGRADED));
 });
 
+test('#init focuses on input if adapter.isFocused is true', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.isFocused()).thenReturn(true);
+  foundation.init();
+  td.verify(foundation.inputFocusHandler_());
+});
+
+test('#init does not focus if adapter.isFocused is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.isFocused()).thenReturn(false);
+  foundation.init();
+  td.verify(foundation.inputFocusHandler_(), {times: 0});
+});
+
 test('#init adds event listeners', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.init();