0

我正在使用material-components-web v8.0.0处理页面，并且无法使用键盘导航我的 mdc-select 元素的选项。向上箭头时只选择第一个选项，向下箭头时只选择最后一个选项。无法选择介于两者之间的任何选项。

在 Chrome、Firefox 和 Opera 中尝试过。

选择标记（根据文档中的示例标记制作）：

<div id="employees_count_select" class="mdc-select mdc-select--filled fullwidth input-space">
                                <div class="mdc-select__anchor">
                                    <span class="mdc-select__ripple"></span>
                                    <span class="mdc-select__selected-text"></span>
                                    <span class="mdc-select__dropdown-icon">
                              <svg
                                      class="mdc-select__dropdown-icon-graphic"
                                      viewBox="7 10 10 5">
                                <polygon
                                        class="mdc-select__dropdown-icon-inactive"
                                        stroke="none"
                                        fill-rule="evenodd"
                                        points="7 10 12 15 17 10">
                                </polygon>
                                <polygon
                                        class="mdc-select__dropdown-icon-active"
                                        stroke="none"
                                        fill-rule="evenodd"
                                        points="7 15 12 10 17 15">
                                </polygon>
                              </svg>
                            </span>
                                    <span class="mdc-floating-label">Employees count</span>
                                    <span class="mdc-line-ripple"></span>
                                </div>

                                <div class="mdc-select__menu mdc-menu mdc-menu-surface fullwidth">
                                    <ul class="mdc-list" role="listbox">
                                        <li class="mdc-list-item mdc-list-item--selected" data-value="small" aria-selected="true" role="option">
                                            <span class="mdc-list-item__ripple"></span>
                                            <span class="mdc-list-item__text">1-49</span>
                                        </li>
                                        <li class="mdc-list-item" data-value="medium" aria-selected="false" role="option">
                                            <span class="mdc-list-item__ripple"></span>
                                            <span class="mdc-list-item__text">50-249</span>
                                        </li>
                                        <li class="mdc-list-item" data-value="large" aria-selected="false" role="option">
                                            <span class="mdc-list-item__ripple"></span>
                                            <span class="mdc-list-item__text">more than 249</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

我的源导入：

import * as mdc from "material-components-web";

我的初始化代码（打字稿）：

private instantiateMaterialSelects = (): void => {
        console.debug("instantiate material selects");
        const selects = document.querySelectorAll('.mdc-select');
        Array.apply(null, selects).forEach((uList: HTMLElement) => {
            const mdcSelect = mdc.select.MDCSelect.attachTo(uList);
            if (uList.id) {
                this._mdcSelects[uList.id] = mdcSelect;
            }
        });
    };

浏览器控制台中没有相关的错误消息。

我试图解决的问题：添加了所有属性等，如文档中的；用新关键字实例化；添加更多选项，偶数和奇数

不支持选择选项中的箭头导航，还是我做错了什么？我真的无法从谷歌或 mdc 问题中得到有用的东西。不过，我可能忽略了一些东西。

谢谢你的帮助。

4

1 回答 1

1

我没有足够的声誉来添加评论，所以我必须使用答案。

我尝试了您的 HTML，它似乎很好，请参阅本文评论中的 jsfiddle 链接。我的猜测 - 这是您的其他代码与箭头键行为混淆。尝试创建最小的可重现样本。

于 2020-12-15T21:26:12.957 回答