mdc-select 中的箭头键导航不起作用

Question

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

在 Chrome、Firefox 和 Opera 中尝试过。

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

<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;
            }
        });
    };

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

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

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

感谢您的帮助。

Answer 1

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

我试过你的 HTML 似乎没问题，请参阅 jsfiddle link 对此 post 的评论。我的猜测 - 这是您的其他代码混淆了箭头键的行为。尝试创建最小的可重现样本。

mdc-select 中的箭头键导航不起作用

arrow key navigation in mdc-select not working

material-components

material-components-web