fix(textfield): Add badInput validity check to textfield (#570)

Author: trimox

packages/mdc-textfield/README.md

@@ -305,7 +305,7 @@ complicated.
 | deregisterInputInputHandler(handler: EventListener) => void | Un-registers an event listener on the native input element for an "input" event |
 | registerInputKeydownHandler(handler: EventListener) => void | Registers an event listener on the native input element for a "keydown" event |
 | deregisterInputKeydownHandler(handler: EventListener) => void | Un-registers an event listener on the native input element for a "keydown" event |
-| getNativeInput() => {value: string, disabled: boolean, checkValidity: () => boolean}? | Returns an object representing the native text input element, with a similar API shape. The object returned should include the `value` and `disabled` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. |
+| getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}? | Returns an object representing the native text input element, with a similar API shape. The object returned should include the `value`, `disabled` and `badInput` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. |
 
 #### The full foundation API
 

packages/mdc-textfield/foundation.js

@@ -104,7 +104,7 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
     const isValid = input.checkValidity();
 
     this.adapter_.removeClass(FOCUSED);
-    if (!input.value) {
+    if (!input.value && !this.isBadInput_()) {
       this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
       this.receivedUserInput_ = false;
     }
@@ -140,6 +140,11 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
     this.adapter_.setHelptextAttr(ARIA_HIDDEN, 'true');
   }
 
+  isBadInput_() {
+    const input = this.getNativeInput_();
+    return input.validity ? input.validity.badInput : input.badInput;
+  }
+
   isDisabled() {
     return this.getNativeInput_().disabled;
   }
@@ -159,6 +164,7 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
       checkValidity: () => true,
       value: '',
       disabled: false,
+      badInput: false,
     };
   }
 }