Skip to content

Dividers in menus receive keyboard focus #13708

Description

@eric-parsons

When navigating through items in a menu using arrow keys, dividers don't get skipped over. Instead, they will receive keyboard focus like any other item. Since dividers serve no purpose other than to visually group menu items, this is a hindrance for keyboard navigation.

  • [x ] This is not a v0.x issue.
  • [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Using arrow key navigation in a Menu component should skip over any contained Divider elements when changing focus.

Current Behavior 😯

Divider elements get keyboard focus.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/q8p57z1j4

  1. Click the Open Menu button.
  2. Press the down arrow key twice.

Your Environment 🌎

Tech Version
Material-UI v3.3.2
React 16.4.2
Browser Chrome, Firefox
TypeScript 2.9.2

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions