fix(textfield): Adjust labels when initializing pre-filled textfields

Fixes #300
material-components · Feb 27, 2017 · f8d72ba · f8d72ba
1 parent 7dcd96f
commit f8d72ba
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
@@ -76,6 +76,11 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
     this.adapter_.registerInputBlurHandler(this.inputBlurHandler_);
     this.adapter_.registerInputInputHandler(this.inputInputHandler_);
     this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_);
+
+    // Ensure label does not collide with any pre-filled value.
+    if (this.getNativeInput_().value) {
+      this.adapter_.addClassToLabel(MDCTextfieldFoundation.cssClasses.LABEL_FLOAT_ABOVE);
+    }
   }
 
   destroy() {

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
@@ -98,6 +98,28 @@ test('#init adds mdc-textfield--upgraded class', () => {
   td.verify(mockAdapter.addClass(cssClasses.UPGRADED));
 });
 
+test('#init adds mdc-textfield__label--float-above class if the input contains a value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNativeInput()).thenReturn({
+    value: 'Pre-filled value',
+    disabled: false,
+    checkValidity: () => true,
+  });
+  foundation.init();
+  td.verify(mockAdapter.addClassToLabel(cssClasses.LABEL_FLOAT_ABOVE));
+});
+
+test('#init does not add mdc-textfield__label--float-above class if the input does not contain a value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNativeInput()).thenReturn({
+    value: '',
+    disabled: false,
+    checkValidity: () => true,
+  });
+  foundation.init();
+  td.verify(mockAdapter.addClassToLabel(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
+});
+
 test('on input focuses if input event occurs without any other events', () => {
   const {foundation, mockAdapter} = setupTest();
   let input;