fix(textfield): Add isFocused to adapter in case autofocus attr is present (#1815)

BREAKING CHANGE: Added isFocused() to Text Field adapter

Author: moog16

demos/text-field.html

@@ -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-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();