-
Notifications
You must be signed in to change notification settings - Fork 3.4k
fix(menu): close menu on tab #11127
fix(menu): close menu on tab #11127
Conversation
4341e66
to
136956b
Compare
@@ -289,6 +289,7 @@ function MenuProvider($$interimElementProvider) { | |||
var handled; | |||
switch (ev.keyCode) { | |||
case $mdConstant.KEY_CODE.ESCAPE: | |||
case $mdConstant.KEY_CODE.TAB: | |||
opts.mdMenuCtrl.close(false, { closeAll: true }); | |||
handled = true; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking at the logic below, when an event is marked as handled
, it'll prevent the default action. This shouldn't be the case for TAB
, because it'll prevent people from moving forward.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, good catch.
86c6b45
to
68694c8
Compare
Feedback addressed. Ready for presubmit. |
@@ -292,6 +292,10 @@ function MenuProvider($$interimElementProvider) { | |||
opts.mdMenuCtrl.close(false, { closeAll: true }); | |||
handled = true; | |||
break; | |||
case $mdConstant.KEY_CODE.TAB: | |||
opts.mdMenuCtrl.close(false, { closeAll: true }); | |||
handled = false; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add comment that explains why handled = false
here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
use only arrow keys to navigate menus resolve issue where tab can escape the panel Fixes #11123
68694c8
to
6e64a7b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
use only arrow keys to navigate menus resolve issue where tab can escape the panel Fixes angular#11123
use only arrow keys to navigate menus resolve issue where tab can escape the panel Fixes #11123
PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Pressing tab inside of a menu panel (
md-menu-content
) can cause the focus to escape the panel and move to other parts of the page (with the menu panel still open).Issue Number:
Fixes #11123
What is the new behavior?
Use only arrow keys to navigate menus (not tabs).
Resolve issue where tab can escape the panel by closing the menu when the
TAB
keyCode is detected.Does this PR introduce a breaking change?
Other information
N/A