Skip to content

[Menu] disableAutoFocusItem prevents arrow key navigation from working #14483

Description

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

Expected Behavior 🤔

When using the disableAutoFocusItem option on Menu, the arrow key navigation should still work.

Current Behavior 😯

Using the arrow keys doesn't work.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/1om2j65x7q

  1. Click the first menu
  2. Use the up and down arrow keys (note that focus moves)
  3. Now click away and click the second menu
  4. Use the up and down arrow keys (note that focus does not move)

Context 🔦

Highlighting the first option in the menu can trick the user into thinking it is already selected. This focus style can be turned off with css, but then there is no feedback given when using arrow keys to select an item. disableAutoFocusItem also fixes the highlight style, but then the arrow keys are prevented from working completely.

Your Environment 🌎

Tech Version
Material-UI v3.?.?
React
Browser
TypeScript
etc.

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: menuChanges related to the menu.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions