I am working on a page with material-components-web v8.0.0 and I am having trouble navigation the options of my mdc-select elements with keyboard. On arrow-up it only selects the first option, on arrow-down only the last option. Selecting any option in between is not possible.
Tried it in Chrome, Firefox and Opera.
The select markup (made off the example markup in the documentation):
<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>
My source import:
import * as mdc from "material-components-web";
My initialization code (typescript):
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;
}
});
};
No related error messages in the browser console.
Things I tried to fix it: added all the attributes etc. like in the documentation; instantiation with new keyword; add more options, even and odd amounts
Is arrow navigation in select options just not supported, or am I doing something wrong? I couldn't really get something useful from google or the mdc issues. I might have overlooked something though.
Thanks for any help.
I don't have enough reputation to add comment, so I have to use answers.
I tried your HTML and it seems to be fine, see jsfiddle link in comment to this post. My guess - it is some other your code messing with arrows keys behavior. Try creating minimal reproducible sample.