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
- Click the first menu
- Use the up and down arrow keys (note that focus moves)
- Now click away and click the second menu
- 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. |
|
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
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.
disableAutoFocusItemalso fixes the highlight style, but then the arrow keys are prevented from working completely.Your Environment 🌎