fix(text-field): Do not trigger shake animation when text field is em…

…pty (#5097)
material-components · Sep 17, 2019 · 4913db9 · 4913db9
1 parent 9058846
commit 4913db9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/packages/mdc-textfield/foundation.ts b/packages/mdc-textfield/foundation.ts
@@ -55,11 +55,11 @@ export class MDCTextFieldFoundation extends MDCFoundation<MDCTextFieldAdapter> {
   }
 
   get shouldFloat(): boolean {
-    return this.shouldAlwaysFloat_ || this.isFocused_ || Boolean(this.getValue()) || this.isBadInput_();
+    return this.shouldAlwaysFloat_ || this.isFocused_ || !!this.getValue() || this.isBadInput_();
   }
 
   get shouldShake(): boolean {
-    return !this.isFocused_ && !this.isValid() && Boolean(this.getValue());
+    return !this.isFocused_ && !this.isValid() && !!this.getValue();
   }
 
   /**
@@ -315,7 +315,7 @@ export class MDCTextFieldFoundation extends MDCFoundation<MDCTextFieldAdapter> {
     this.isValid_ = isValid;
     this.styleValidity_(isValid);
 
-    const shouldShake = !isValid && !this.isFocused_;
+    const shouldShake = !isValid && !this.isFocused_ && !!this.getValue();
     if (this.adapter_.hasLabel()) {
       this.adapter_.shakeLabel(shouldShake);
     }

diff --git a/test/screenshot/spec/mdc-textfield/fixture.js b/test/screenshot/spec/mdc-textfield/fixture.js
@@ -29,6 +29,11 @@ window.mdc.testFixture.fontsLoaded.then(() => {
       textField.useNativeValidation = false;
       textField.valid = false;
     }
+
+    el.querySelector('.mdc-text-field__input').addEventListener('blur', () => {
+      // Focusing out from empty text field input shouldn't trigger shake animation.
+      textField.valid = false;
+    });
   });
 
   // Fixes the wide notched outline issue.

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
@@ -260,6 +260,9 @@ test('#setValid overrides native validation when useNativeValidation set to fals
 test('#setValid updates classes', () => {
   const {foundation, mockAdapter, helperText} = setupTest({useHelperText: true});
   td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.getNativeInput()).thenReturn({
+    value: 'test',
+  });
 
   foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
@@ -367,6 +370,16 @@ test('#setValid removes mdc-textfied--invalid when set to true', () => {
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
 });
 
+test('#setValid should not trigger shake animation when text field is empty', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.getNativeInput()).thenReturn({
+    value: '',
+  });
+  foundation.setValid(false);
+  td.verify(mockAdapter.shakeLabel(false));
+});
+
 test('#init focuses on input if adapter.isFocused is true', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.isFocused()).thenReturn(true);