0

I am trying to add an mdc-select element to my page, but no matter what I try to do the options are always visible. I even see this issue when looking at other peoples' codepens that include the select component. For example, this one: https://codepen.io/anon/pen/EQQqyb

HTML:

<p class="mdl-typography--body">
Use this pen as a starting point to prototype a new component, experiement with, or reproduce an issue with <a href="https://github.com/material-components/material-components-web" target="_blank">Material Components for the web</a>.
</p>
<div id="js-select" 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-simple-menu mdc-select__menu">
                    <ul class="mdc-list mdc-simple-menu__items">
                        <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0">
                            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>

CSS:

.mdc-select {
    width: 200px;
}

And the JS:

var select = new mdc.select.MDCSelect(document.getElementById('js-select'));

Am I missing something that I'm supposed to be doing when using this component?

Rob Bauman
  • 65
  • 8

1 Answers1

1

The mdc-simple-menu component was renamed to mdc-menu in version 0.30.0. If you simply remove simple- from your code, it will work. 

<div id="js-select" 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">
        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>

https://codepen.io/williamernest/pen/LQdKJy

https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md

Will Ernest
  • 84
  • 2