refactor(textfield): Refactor foundation class

Author: anton-kachurin

packages/mdc-textfield/foundation.js

@@ -79,6 +79,10 @@ class MDCTextfieldFoundation extends MDCFoundation {
     this.receivedUserInput_ = false;
     /** @private {boolean} */
     this.useCustomValidityChecking_ = false;
+    /** @private {boolean} */
+    this.labelFloatIsActive_ = false;
+    /** @private {boolean} */
+    this.setValueIsProcessing_ = false;
     /** @private {function(): undefined} */
     this.inputFocusHandler_ = () => this.activateFocus_();
     /** @private {function(): undefined} */
@@ -96,9 +100,7 @@ class MDCTextfieldFoundation extends MDCFoundation {
   init() {
     this.adapter_.addClass(MDCTextfieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
-    if (this.getNativeInput_().value) {
-      this.adapter_.addClassToLabel(MDCTextfieldFoundation.cssClasses.LABEL_FLOAT_ABOVE);
-    }
+    this.updateLabelFloat_();
 
     this.adapter_.registerInputInteractionHandler('focus', this.inputFocusHandler_);
     this.adapter_.registerInputInteractionHandler('blur', this.inputBlurHandler_);
@@ -155,13 +157,13 @@ class MDCTextfieldFoundation extends MDCFoundation {
    * @private
    */
   activateFocus_() {
-    const {BOTTOM_LINE_ACTIVE, FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
+    const {BOTTOM_LINE_ACTIVE, FOCUSED, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
+    this.isFocused_ = true;
+    this.updateLabelFloat_();
     this.adapter_.addClass(FOCUSED);
     this.adapter_.addClassToBottomLine(BOTTOM_LINE_ACTIVE);
-    this.adapter_.addClassToLabel(LABEL_FLOAT_ABOVE);
     this.adapter_.removeClassFromLabel(LABEL_SHAKE);
     this.showHelptext_();
-    this.isFocused_ = true;
   }
 
   /**
@@ -196,21 +198,18 @@ class MDCTextfieldFoundation extends MDCFoundation {
    * @private
    */
   updateLabelFloat_() {
-    // Don't do anything if the input is focused.
-    if (!this.isFocused_) {
-      const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
-      const input = this.getNativeInput_();
+    const input = this.getNativeInput_();
+    const {LABEL_FLOAT_ABOVE} = MDCTextfieldFoundation.cssClasses;
 
-      if (input.value) {
+    if (this.isFocused_ || input.value) {
+      if (!this.labelFloatIsActive_) {
+        this.labelFloatIsActive_ = true;
         this.adapter_.addClassToLabel(LABEL_FLOAT_ABOVE);
-      } else {
-        this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
       }
-
-      if (!this.useCustomValidityChecking_) {
-        this.adapter_.removeClassFromLabel(LABEL_SHAKE);
-        this.showHelptext_();
-        this.changeValidity_(input.checkValidity());
+    } else {
+      if (this.labelFloatIsActive_) {
+        this.labelFloatIsActive_ = false;
+        this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
       }
     }
   }
@@ -246,19 +245,24 @@ class MDCTextfieldFoundation extends MDCFoundation {
    * @private
    */
   deactivateFocus_() {
-    const {FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
+    const {FOCUSED, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
     const input = this.getNativeInput_();
 
     this.isFocused_ = false;
     this.adapter_.removeClass(FOCUSED);
     this.adapter_.removeClassFromLabel(LABEL_SHAKE);
 
     if (!input.value && !this.isBadInput_()) {
-      this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
+      this.updateLabelFloat_();
       this.receivedUserInput_ = false;
     }
 
+    this.updateDefaultValidity_();
+  }
+
+  updateDefaultValidity_() {
     if (!this.useCustomValidityChecking_) {
+      const input = this.getNativeInput_();
       this.changeValidity_(input.checkValidity());
     }
   }
@@ -273,8 +277,11 @@ class MDCTextfieldFoundation extends MDCFoundation {
     if (isValid) {
       this.adapter_.removeClass(INVALID);
     } else {
-      this.adapter_.addClassToLabel(LABEL_SHAKE);
       this.adapter_.addClass(INVALID);
+
+      if (this.isFocused_) {
+        this.adapter_.addClassToLabel(LABEL_SHAKE);
+      }
     }
     this.updateHelptext_(isValid);
   }
@@ -343,6 +350,20 @@ class MDCTextfieldFoundation extends MDCFoundation {
     }
   }
 
+  /**
+   * @param {string} value The value of the textfield.
+   */
+  setValue(value) {
+    this.setValueIsProcessing_ = true;
+
+    const input = this.getNativeInput_();
+    input.value = value;
+    this.updateLabelFloat_();
+    this.updateDefaultValidity_();
+
+    this.setValueIsProcessing_ = false;
+  }
+
   /**
    * @return {!Element|!NativeInputType} The native text input from the
    * host environment, or a dummy if none exists.
@@ -379,8 +400,10 @@ class MDCTextfieldFoundation extends MDCFoundation {
       const nativeInputElementDesc = /** @type {!ObjectPropertyDescriptor} */ ({
         get: desc.get,
         set: (value) => {
-          desc.set.call(nativeInputElement, value);
-          this.updateLabelFloat_();
+          if (!this.setValueIsProcessing_) {
+            desc.set.call(nativeInputElement, value);
+            this.setValue(value);
+          }
         },
         configurable: desc.configurable,
         enumerable: desc.enumerable,

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

@@ -315,17 +315,25 @@ test('on focus removes aria-hidden from helptext', () => {
 const setupBlurTest = () => {
   const {foundation, mockAdapter} = setupTest();
   let blur;
-  td.when(mockAdapter.registerInputInteractionHandler('blur', td.matchers.isA(Function))).thenDo((evtType, handler) => {
-    blur = handler;
-  });
+  td.when(mockAdapter.registerInputInteractionHandler('blur', td.matchers.isA(Function))).thenDo(
+    (evtType, handler) => {
+      blur = handler;
+    }
+  );
+  let focus;
+  td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function))).thenDo(
+    (evtType, handler) => {
+      focus = handler;
+    }
+  );
   const nativeInput = {
     value: '',
     checkValidity: () => true,
   };
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
-  return {foundation, mockAdapter, blur, nativeInput};
+  return {foundation, mockAdapter, focus, blur, nativeInput};
 };
 
 test('on blur removes mdc-textfield--focused class', () => {
@@ -335,7 +343,8 @@ test('on blur removes mdc-textfield--focused class', () => {
 });
 
 test('on blur removes mdc-textfield__label--float-above when no input value present', () => {
-  const {mockAdapter, blur} = setupBlurTest();
+  const {mockAdapter, focus, blur} = setupBlurTest();
+  focus();
   blur();
   td.verify(mockAdapter.removeClassFromLabel(cssClasses.LABEL_FLOAT_ABOVE));
 });