From 68c08f7c309bdfa275ea43b8cb9dad46a2b2231c Mon Sep 17 00:00:00 2001
From: Matty Goo <mattgoo@google.com>
Date: Mon, 16 Apr 2018 14:13:52 -0700
Subject: [PATCH] fix(select): Float label on focus/blur (#2560)

---
 packages/mdc-select/foundation.js              | 11 ++++++++---
 test/unit/mdc-select/foundation-events.test.js | 18 +++++++++++++++++-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index 23fd49d5c51..07bccdf8457 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -73,9 +73,7 @@ export default class MDCSelectFoundation extends MDCFoundation {
 
     this.adapter_.setSelectedIndex(index);
     this.adapter_.addClass(IS_CHANGING);
-    const optionHasValue = this.adapter_.getValue().length > 0;
-
-    this.adapter_.floatLabel(optionHasValue);
+    this.floatLabelWithValue_();
 
     setTimeout(() => {
       this.adapter_.removeClass(IS_CHANGING);
@@ -97,11 +95,18 @@ export default class MDCSelectFoundation extends MDCFoundation {
     }
   }
 
+  floatLabelWithValue_() {
+    const optionHasValue = this.adapter_.getValue().length > 0;
+    this.adapter_.floatLabel(optionHasValue);
+  }
+
   handleFocus_() {
+    this.adapter_.floatLabel(true);
     this.adapter_.activateBottomLine();
   }
 
   handleBlur_() {
+    this.floatLabelWithValue_();
     this.adapter_.deactivateBottomLine();
   }
 
diff --git a/test/unit/mdc-select/foundation-events.test.js b/test/unit/mdc-select/foundation-events.test.js
index 69803f365a4..a54f59f347e 100644
--- a/test/unit/mdc-select/foundation-events.test.js
+++ b/test/unit/mdc-select/foundation-events.test.js
@@ -33,18 +33,34 @@ function setupTest() {
 
 suite('MDCSelectFoundation - Events');
 
-test('on focus activates bottom line', () => {
+test('on focus activates bottom line and floats label', () => {
   const {mockAdapter, handlers} = setupTest();
   handlers.focus();
   td.verify(mockAdapter.activateBottomLine(), {times: 1});
+  td.verify(mockAdapter.floatLabel(true), {times: 1});
 });
 
 test('on blur deactivates bottom line', () => {
   const {mockAdapter, handlers} = setupTest();
+  td.when(mockAdapter.getValue()).thenReturn('');
   handlers.blur();
   td.verify(mockAdapter.deactivateBottomLine(), {times: 1});
 });
 
+test('on blur with no value defloats label', () => {
+  const {mockAdapter, handlers} = setupTest();
+  td.when(mockAdapter.getValue()).thenReturn('');
+  handlers.blur();
+  td.verify(mockAdapter.floatLabel(false), {times: 1});
+});
+
+test('on blur with value floats label', () => {
+  const {mockAdapter, handlers} = setupTest();
+  td.when(mockAdapter.getValue()).thenReturn('some value');
+  handlers.blur();
+  td.verify(mockAdapter.floatLabel(true), {times: 1});
+});
+
 test('on select value change with option value', () => {
   const clock = lolex.install();
   const {mockAdapter, handlers} = setupTest();