Material Components Web -选择组件行为不正确

Question

我正在尝试向我的页面添加一个mdc-select元素，但是无论我尝试做什么，选项总是可见的。我甚至在查看包含select组件的其他人的代码依赖项时也看到了这个问题。例如，这一条：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;
}

和JS：

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

在使用这个组件时，我是否遗漏了一些我应该做的事情？

Answer 1

在0.30.0版中，mdc-simple-menu组件被重命名为mdc-menu。如果您只需从代码中删除simple-，它就会正常工作。

<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