diff --git a/demo/index.html b/demo/index.html index 11da832..5e53e8e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -113,6 +113,33 @@

Multi-select menubar

+
+

Keyboard search

+
+ + Alabama + Alaska + California + Colorado + New Mexico + New York + +
+
+ +
+

Keyboard search disabled

+
+ + Alabama + Alaska + California + Colorado + New Mexico + New York + +
+
diff --git a/iron-menu-behavior.html b/iron-menu-behavior.html index ac54699..dd47dd5 100644 --- a/iron-menu-behavior.html +++ b/iron-menu-behavior.html @@ -41,6 +41,16 @@ */ attrForItemTitle: { type: String + }, + + /** + * Setting this attribute to true will prevent keyboard events from + * causing the menu items to be searched and will allow all keyboard + * events except those used for menu navigation to continue propagating. + */ + disableKeyboardSearch: { + type: Boolean, + value: false, } }, @@ -350,11 +360,18 @@ * @param {KeyboardEvent} event A keyboard event. */ _onKeydown: function(event) { - if (!this.keyboardEventMatchesKeys(event, 'up down esc')) { - // all other keys focus the menu item starting with that character - this._focusWithKeyboardEvent(event); + if (this.disableKeyboardSearch) { + // Stop only keyboard navigation events. + if (this.keyboardEventMatchesKeys(event, 'up down esc')) { + event.stopPropagation(); + } + } else { + // Attempt to focus with any non-navigation keyboard event. + if (!this.keyboardEventMatchesKeys(event, 'up down esc')) { + this._focusWithKeyboardEvent(event); + } + event.stopPropagation(); } - event.stopPropagation(); }, // override _activateHandler diff --git a/test/iron-menu-behavior.html b/test/iron-menu-behavior.html index ea1322a..7adb763 100644 --- a/test/iron-menu-behavior.html +++ b/test/iron-menu-behavior.html @@ -419,6 +419,34 @@ }); }); + test('`disableKeyboardSearch` allows non-navigation keyboard events to propagate.', function(done) { + var menu = fixture('countries'); + menu.disableKeyboardSearch = true; + + MockInteractions.focus(menu); + + // Wait for async focus + Polymer.Base.async(function() { + // Focus initially moves to the first item. + assert.equal(Polymer.dom(menu).node.focusedItem, menu.items[0], 'menu.items[0] is focused'); + + // Key press 'u' + MockInteractions.keyDownOn(menu, 85); + + // Focus does not change for keyboard events. + assert.equal(Polymer.dom(menu).node.focusedItem, menu.items[0], 'menu.items[0] is focused'); + + // Key press 'g' + MockInteractions.keyDownOn(menu, 71); + + Polymer.Base.async(function() { + // Focus does not change for keyboard events. + assert.equal(Polymer.dom(menu).node.focusedItem, menu.items[0], 'menu.items[0] is focused'); + done(); + }); + }); + }); + test('focusing on item with bogus attr-for-item-title', function(done) { var menu = fixture('bogus-attr-for-item-title'); MockInteractions.focus(menu);