fix(select): Float label on focus/blur (#2560)

material-components · Apr 16, 2018 · 68c08f7 · 68c08f7
1 parent 5ba7e27
commit 68c08f7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git 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
@@ -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();