fix(select): Fix floating label for pre-selected option (#2306)

* fix(select): Fix pre-selected option. Add tests to check for regression. Update demo to reflect setting a pre-selected option through HTML or JS.
material-components · Feb 27, 2018 · d8dae34 · d8dae34
1 parent 807b6ce
commit d8dae34
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 13 deletions.
diff --git a/demos/select.html b/demos/select.html
@@ -131,6 +131,10 @@ <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
           <input type="checkbox" id="disabled">
           <label for="disabled">Disabled</label>
         </div>
+        <div>
+          <input type="checkbox" id="set-selected-checkbox">
+          <label for="set-selected-checkbox">Set Selected Index (0)</label>
+        </div>
       </section>
 
       <section class="example">
@@ -173,30 +177,65 @@ <h2 class="mdc-typography--title">Select box</h2>
           <input type="checkbox" id="box-disabled">
           <label for="box-disabled">Disabled</label>
         </div>
+        <div>
+          <input type="checkbox" id="box-set-selected-checkbox">
+          <label for="box-set-selected-checkbox">Set Selected Index (0)</label>
+        </div>
+      </section>
+
+      <section class="example">
+        <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
+        <section id="demo-wrapper">
+          <div id="js-pre-selected" class="mdc-select" role="listbox">
+            <div class="mdc-select__surface" tabindex="0">
+              <div class="mdc-select__label">Food Group</div>
+              <div class="mdc-select__selected-text"></div>
+              <div class="mdc-select__bottom-line"></div>
+            </div>
+            <div class="mdc-menu mdc-select__menu">
+              <ul class="mdc-list mdc-menu__items">
+                <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0" aria-selected="true">
+                  Fruit Roll Ups
+                </li>
+                <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
+                  Candy (cotton)
+                </li>
+                <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
+                  Vegetables
+                </li>
+                <li class="mdc-list-item" role="option" id="noodles" tabindex="0">
+                  Noodles
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
       </section>
     </main>
 
     <script src="/assets/material-components-web.js" async></script>
     <script>
       demoReady(function() {
         mdc.select.MDCSelect.attachTo(document.getElementById('hero-js-select'));
+        mdc.select.MDCSelect.attachTo(document.getElementById('js-pre-selected'));
 
         var root = document.getElementById('js-select');
         var boxCurrentlySelected = document.getElementById('currently-selected');
         var select = new mdc.select.MDCSelect(root);
+        var boxDemoWrapper = document.getElementById('demo-wrapper');
+        var rtlCb = document.getElementById('rtl');
+        var alternateColorsCb = document.getElementById('alternate-colors');
+        var disabledCb = document.getElementById('disabled');
+        var setSelectedCb = document.getElementById('set-selected-checkbox');
 
         root.addEventListener('MDCSelect:change', function() {
           var item = select.selectedOptions[0];
           var index = select.selectedIndex;
           boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
             ' with value "' + select.value + '"';
-        });
-
-        var boxDemoWrapper = document.getElementById('demo-wrapper');
-        var rtlCb = document.getElementById('rtl');
-        var alternateColorsCb = document.getElementById('alternate-colors');
-        var disabledCb = document.getElementById('disabled');
 
+          setSelectedCb.checked = index === 0;
+        });
         rtlCb.addEventListener('change', function() {
           if (rtlCb.checked) {
             boxDemoWrapper.setAttribute('dir', 'rtl');
@@ -210,25 +249,29 @@ <h2 class="mdc-typography--title">Select box</h2>
         disabledCb.addEventListener('change', function() {
           select.disabled = disabledCb.checked;
         });
+        setSelectedCb.addEventListener('change', function() {
+          select.selectedIndex = this.checked ? 0 : -1;
+        });
       });
 
       demoReady(function() {
         var root = document.getElementById('box-js-select');
         var boxCurrentlySelected = document.getElementById('box-currently-selected');
         var select = new mdc.select.MDCSelect(root);
+        var boxDemoWrapper = document.getElementById('box-demo-wrapper');
+        var rtlCb = document.getElementById('box-rtl');
+        var alternateColorsCb = document.getElementById('box-alternate-colors');
+        var disabledCb = document.getElementById('box-disabled');
+        var setSelectedCb = document.getElementById('box-set-selected-checkbox');
 
         root.addEventListener('MDCSelect:change', function() {
           var item = select.selectedOptions[0];
           var index = select.selectedIndex;
           boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
             ' with value "' + select.value + '"';
-        });
-
-        var boxDemoWrapper = document.getElementById('box-demo-wrapper');
-        var rtlCb = document.getElementById('box-rtl');
-        var alternateColorsCb = document.getElementById('box-alternate-colors');
-        var disabledCb = document.getElementById('box-disabled');
 
+          setSelectedCb.checked = index === 0;
+        });
         rtlCb.addEventListener('change', function() {
           if (rtlCb.checked) {
             boxDemoWrapper.setAttribute('dir', 'rtl');
@@ -242,8 +285,10 @@ <h2 class="mdc-typography--title">Select box</h2>
         disabledCb.addEventListener('change', function() {
           select.disabled = disabledCb.checked;
         });
+        setSelectedCb.addEventListener('change', function() {
+          select.selectedIndex = this.checked ? 0 : -1;
+        });
       });
-
     </script>
   </body>
 </html>
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
@@ -154,6 +154,11 @@ export default class MDCSelectFoundation extends MDCFoundation {
     if (this.selectedIndex_ >= 0) {
       selectedTextContent = this.adapter_.getTextForOptionAtIndex(this.selectedIndex_).trim();
       this.adapter_.setAttrForOptionAtIndex(this.selectedIndex_, 'aria-selected', 'true');
+      this.adapter_.floatLabel(true);
+    } else {
+      if (!this.adapter_.isMenuOpen()) {
+        this.adapter_.floatLabel(false);
+      }
     }
     this.adapter_.setSelectedTextContent(selectedTextContent);
   }

diff --git a/test/unit/mdc-select/foundation.test.js b/test/unit/mdc-select/foundation.test.js
@@ -112,6 +112,39 @@ test('#setSelectedIndex clears the select if given index is >= the number of opt
   assert.equal(foundation.getSelectedIndex(), -1);
 });
 
+test('#setSelectedIndex with valid index causes the label to float', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNumberOfOptions()).thenReturn(2);
+  td.when(mockAdapter.getTextForOptionAtIndex(td.matchers.anything())).thenReturn('');
+
+  foundation.setSelectedIndex(0);
+
+  td.verify(mockAdapter.floatLabel(true));
+});
+
+test('#setSelectedIndex with -1 and already floating label causes the label to dock', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNumberOfOptions()).thenReturn(2);
+  td.when(mockAdapter.isMenuOpen()).thenReturn(false);
+  td.when(mockAdapter.getTextForOptionAtIndex(td.matchers.anything())).thenReturn('');
+
+  foundation.setSelectedIndex(-1);
+
+  td.verify(mockAdapter.setSelectedTextContent(''));
+  td.verify(mockAdapter.floatLabel(false));
+});
+
+test('#setSelectedIndex with -1 and menu open does not cause the label to dock', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNumberOfOptions()).thenReturn(2);
+  td.when(mockAdapter.isMenuOpen()).thenReturn(true);
+  td.when(mockAdapter.getTextForOptionAtIndex(td.matchers.anything())).thenReturn('');
+
+  foundation.setSelectedIndex(-1);
+
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+});
+
 test('#isDisabled returns false by default', () => {
   const {foundation} = setupTest();
   assert.isNotOk(foundation.isDisabled());