google/material-design-lite

Menu: Menu should close when a user tabs to next focusable element

Open

#4790 opened on Sep 24, 2016

View on GitHub
 (1 comment) (0 reactions) (0 assignees)HTML (32,173 stars) (4,926 forks)batch import
help wantedv1-bug

Description

What MDL Version are you using? (please be specific, e.g. major.minor.patch) material-design-lite-1.2.1

What browser(s) is this bug affecting (including version)? Any browser

What OS (and version) are you using? OSX, 10.11.6

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

What is the expected behavior? The menu should close

What is the actual behavior? The menu is still open

One more: After clicking on the button to open the menu, it is not possible to navigate the menu using keyboard. When a user cliks on the menu button, the first menu item shuld gain focus.

Contributor guide

Tech stack
htmlcssjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic HTML/CSS/JSUnderstanding of focus events
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the menu component to add a blur or tab keydown listener that closes the menu. Look for the menu toggle implementation and ensure the first menu item receives focus when opened. The existing code likely uses a simple click handler; extend to handle keyboard events.