Bug report

Having some mdc-list-item with display: none; prevents arrow keyboard navigation to the next element.

Steps to reproduce

https://codepen.io/jkevingutierrez/pen/OJRdGaw

1. Follow https://material.io/develop/web/components/input-controls/select-menus but add style="display: none;" to some element (except the last one)
2. Open the MDCSelect
3. Navigate using the arrow keyboards
4. See the error

Actual behavior

Having some element focused, if the next element has style="display: none;" the user won't be able to go to the next element using the down arrow

Expected behavior

Navigating with arrows shouldn't be affected for having some element with display: none

Screenshots

Your Environment:

Additional context

Possible solution

• When navigating with arrows, it should check for the next/previous visible element instead of the next/previous element