diff --git a/src/components/menu/js/menuController.js b/src/components/menu/js/menuController.js
index de1daf92c5e..375e8a5affd 100644
--- a/src/components/menu/js/menuController.js
+++ b/src/components/menu/js/menuController.js
@@ -162,7 +162,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
var focusTarget = menuContainer[0]
.querySelector(prefixer.buildSelector(['md-menu-focus-target', 'md-autofocus']));
- if (!focusTarget) focusTarget = menuContainer[0].querySelector('.md-button');
+ if (!focusTarget) focusTarget = menuContainer[0].querySelector('.md-button:not([disabled])');
focusTarget.focus();
};
diff --git a/src/components/menu/js/menuServiceProvider.js b/src/components/menu/js/menuServiceProvider.js
index 5cd7eb7d63b..93309ab0e2d 100644
--- a/src/components/menu/js/menuServiceProvider.js
+++ b/src/components/menu/js/menuServiceProvider.js
@@ -210,14 +210,23 @@ function MenuProvider($$interimElementProvider) {
opts.menuContentEl.on('keydown', onMenuKeyDown);
opts.menuContentEl[0].addEventListener('click', captureClickListener, true);
- // kick off initial focus in the menu on the first element
+ // kick off initial focus in the menu on the first enabled element
var focusTarget = opts.menuContentEl[0]
.querySelector(prefixer.buildSelector(['md-menu-focus-target', 'md-autofocus']));
if ( !focusTarget ) {
- var firstChild = opts.menuContentEl[0].firstElementChild;
-
- focusTarget = firstChild && (firstChild.querySelector('.md-button:not([disabled])') || firstChild.firstElementChild);
+ var childrenLen = opts.menuContentEl[0].children.length;
+ for(var childIndex = 0; childIndex < childrenLen; childIndex++) {
+ var child = opts.menuContentEl[0].children[childIndex];
+ focusTarget = child.querySelector('.md-button:not([disabled])');
+ if (focusTarget) {
+ break;
+ }
+ if (child.firstElementChild && !child.firstElementChild.disabled) {
+ focusTarget = child.firstElementChild;
+ break;
+ }
+ }
}
focusTarget && focusTarget.focus();
diff --git a/src/components/menu/menu.spec.js b/src/components/menu/menu.spec.js
index 57b74e35d4a..4e0d128e75b 100644
--- a/src/components/menu/menu.spec.js
+++ b/src/components/menu/menu.spec.js
@@ -152,6 +152,52 @@ describe('material.components.menu', function() {
expect(getOpenMenuContainer(menu).length).toBe(0);
}));
+ describe('default focus', function() {
+ it('should focus on first item automatically', inject(function($compile, $rootScope, $document) {
+ var menu = $compile(
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ ''
+ )($rootScope);
+
+ openMenu(menu);
+
+ var menuTarget = $document[0].querySelector('#menuItem0');
+
+ expect(document.activeElement).toBe(menuTarget);
+ }));
+
+ it('should focus on first non-disabled item', inject(function($compile, $rootScope, $document) {
+ var menu = $compile(
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ ''
+ )($rootScope);
+
+ openMenu(menu);
+
+ var menuTarget = $document[0].querySelector('#menuItem1');
+
+ expect(document.activeElement).toBe(menuTarget);
+ }));
+ });
+
describe('autofocus', function() {
it('should focus a button with md-menu-focus-target', inject(function($compile, $rootScope, $document) {
@@ -159,6 +205,9 @@ describe('material.components.menu', function() {
'' +
'' +
'' +
+ '' +
+ '' +
+ '' +
'' +
'' +
'' +
@@ -178,6 +227,9 @@ describe('material.components.menu', function() {
'' +
'' +
'' +
+ '' +
+ '' +
+ '' +
'' +
'' +
'' +