From f8d72ba72b2fb47a2027a09d81f4702581875d90 Mon Sep 17 00:00:00 2001
From: Travis Kaufman <traviskaufman@google.com>
Date: Mon, 27 Feb 2017 16:52:22 -0500
Subject: [PATCH] fix(textfield): Adjust labels when initializing pre-filled
 textfields

Fixes #300
---
 packages/mdc-textfield/foundation.js       |  5 +++++
 test/unit/mdc-textfield/foundation.test.js | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 03f1b9272f1..dc7f1099a9e 100644
--- 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
index c37ae64fd10..f32fd9b9810 100644
--- 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;