Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Undesired delay on highlighting MenuItem when navigating Menu with arrow keys

See original GitHub issue

When a user navigates on a menu (dropdown) using arrow keys, the “current” item is not right away visually highlighted. Therefore, user cannot quickly navigate a long menu, and has to wait after each keypress for the highlight to appear to show him where he is.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Navigating on a Menu using arrow keys must immediately highlight the current MenuItem so user does not have to wait to see which items is highlighted.

Current Behavior

Currently there is a fade-in transition to highlight the background of MenuItem. When navigating quickly on the items using keyboard, this transition prevents user from quickly seeing which item is currently highlighted. Therefore, user has to wait after each keypress to see which item he is on.

Steps to Reproduce (for bugs)

This can be observed on the official documentation page: https://material-ui-next.com/demos/menus/

Context

Filling forms with keyboard is common practice for heavy users of business apps. I noticed they have difficulties selecting from MUI dropdowns due to the misbehavior described above.

Your Environment

Tech	Version
Material-UI	beta 29
React	16.1
browser	Chrome
etc

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:12 (12 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Mar 23, 2019

Any objection to continuing with the approach I’ve outlined for now so that we can do this more incrementally and take care of some of the outstanding issues?

No objection, I agree, we should solve one problem at the time. I was interested in the global picture.

My own personal priority is to finish this change and then take care of #8191

Solving this issue would make me very happy. It’s a great objective 🧭 ! It’s a pleasure and an honor to review your work. Your pull requests have always been relevant.

1reaction

ryancogswellcommented, Mar 22, 2019

I assume we would check the existence of the attribute on the DOM node and not the property on the React element?

@oliviertassinari Correct. MenuList:handleKeyDown would be looking at the children of the list DOM node and checking for tab index on those children.

Top Results From Across the Web

Undesired delay on highlighting MenuItem when navigating ...

When a user navigates on a menu (dropdown) using arrow keys, the "current" item is not right away visually highlighted.

Why am I not able to focus on this menu item when using tab ...

However, when I try to navigate to the fourth menu item via tabs and arrow keys, it doesn't focus on it and it...

Lagging cursor in Word while using arrow keys

When holding an arrow key, it is slow to respond, and then suddenly jumps several words. When selecting to the left with the...

Polycom VVX 300 and VVX 310 User Guide - Poly Support

Use the up and down arrow keys to highlight a menu item or option, and press Select. If the menu is numbered, press...

Documentation - iTerm2 - macOS Terminal Replacement

When selected, the screen will slightly delay redraws while the cursor is hidden. This improves the visual appearance of scrolling in many programs...