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

【问题标题】：Material Components Web - Select component not behaving correctlyMaterial Components Web - 选择的组件行为不正确
【发布时间】：2018-02-19 21:31:42
【问题描述】：

我正在尝试向我的页面添加一个 mdc-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'));

我是否错过了使用此组件时应该做的事情？

【问题讨论】：

标签： material-components-web

【解决方案1】：

mdc-simple-menu 组件在 0.30.0 版本中重命名为 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

【讨论】：