diff --git a/packages/mdc-menu/index.js b/packages/mdc-menu/index.js index b8e4ef33b45..e21b8910013 100644 --- a/packages/mdc-menu/index.js +++ b/packages/mdc-menu/index.js @@ -72,7 +72,7 @@ class MDCMenu extends MDCComponent { initialSyncWithDOM() { this.afterOpenedCallback_ = () => this.handleAfterOpened_(); this.handleKeydown_ = (evt) => this.foundation_.handleKeydown(evt); - this.handleItemAction_ = (evt) => this.foundation_.handleItemAction(this.items[evt.detail]); + this.handleItemAction_ = (evt) => this.foundation_.handleItemAction(this.items[evt.detail.index]); this.menuSurface_.listen(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.afterOpenedCallback_); this.listen('keydown', this.handleKeydown_); diff --git a/test/unit/mdc-menu/mdc-menu.test.js b/test/unit/mdc-menu/mdc-menu.test.js index 6ba2f02872b..e061ff6be27 100644 --- a/test/unit/mdc-menu/mdc-menu.test.js +++ b/test/unit/mdc-menu/mdc-menu.test.js @@ -75,6 +75,16 @@ class FakeMenuSurface { } } +/** + * @param {boolean=} open + * @return {{ + * component: !MDCMenu, + * menuSurface: !MDCMenuSurface, + * root: !HTMLElement, + * list: !MDCList, + * mockFoundation: !MDCMenuFoundation + * }} + */ function setupTestWithFakes(open = false) { const root = getFixture(open); @@ -89,6 +99,10 @@ function setupTestWithFakes(open = false) { return {root, component, menuSurface, list, mockFoundation}; } +/** + * @param {boolean=} open + * @return {{component: !MDCMenu, root: !HTMLElement}} + */ function setupTest(open = false) { const root = getFixture(open); @@ -121,7 +135,7 @@ test('attachTo initializes and returns a MDCMenu instance', () => { test('initialize registers event listener for list item action', () => { const {mockFoundation, root} = setupTestWithFakes(); - domEvents.emit(root, MDCListFoundation.strings.ACTION_EVENT, {detail: 0}); + domEvents.emit(root, MDCListFoundation.strings.ACTION_EVENT, {detail: {index: 0}}); td.verify(mockFoundation.handleItemAction(td.matchers.isA(Element)), {times: 1}); }); @@ -135,7 +149,7 @@ test('destroy deregisters event listener for click', () => { const {component, mockFoundation, root} = setupTestWithFakes(); component.destroy(); - domEvents.emit(root, MDCListFoundation.strings.ACTION_EVENT, {detail: 0}); + domEvents.emit(root, MDCListFoundation.strings.ACTION_EVENT, {detail: {index: 0}}); td.verify(mockFoundation.handleItemAction(td.matchers.isA(Element)), {times: 0}); }); @@ -276,6 +290,20 @@ test('menu surface opened event causes no element to be focused if the list is e document.body.removeChild(root); }); +test('list item enter keydown emits a menu action event', () => { + const {root, component} = setupTest(); + const fakeEnterKeyEvent = {key: 'Enter', target: {tagName: 'div'}, preventDefault: () => undefined}; + + let detail = undefined; + component.listen(MDCMenuFoundation.strings.SELECTED_EVENT, (evt) => detail = evt.detail); + + document.body.appendChild(root); + component.list_.foundation_.handleKeydown(fakeEnterKeyEvent, /* isRootListItem */ true, /* listItemIndex */ 0); + document.body.removeChild(root); + + assert.deepEqual(detail, {index: 0, item: component.items[0]}); +}); + test('open=true does not throw an error if there are no items in the list to focus', () => { const {component, root, list} = setupTestWithFakes(); list.listElements = [];