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() { '' + '' + '' + + '' + + '' + + '' + '' + '' + '' +