Fixes #82: Adds the disable-keyboard-search attribute.

PolymerElements · Nov 10, 2016 · 4c1fee6 · 4c1fee6
1 parent eb20ed8
commit 4c1fee6
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -113,6 +113,33 @@ <h3>Multi-select menubar</h3>
       </div>
     </div>
 
+    <div>
+      <h3>Keyboard search</h3>
+      <div class="horizontal-section">
+        <simple-menu>
+          <a href="javascript:void(0)" role="menuitem">Alabama</a>
+          <a href="javascript:void(0)" role="menuitem">Alaska</a>
+          <a href="javascript:void(0)" role="menuitem">California</a>
+          <a href="javascript:void(0)" role="menuitem">Colorado</a>
+          <a href="javascript:void(0)" role="menuitem">New Mexico</a>
+          <a href="javascript:void(0)" role="menuitem">New York</a>
+        </simple-menu>
+      </div>
+    </div>
+
+    <div>
+      <h3>Keyboard search disabled</h3>
+      <div class="horizontal-section">
+        <simple-menu disable-keyboard-search>
+          <a href="javascript:void(0)" role="menuitem">Alabama</a>
+          <a href="javascript:void(0)" role="menuitem">Alaska</a>
+          <a href="javascript:void(0)" role="menuitem">California</a>
+          <a href="javascript:void(0)" role="menuitem">Colorado</a>
+          <a href="javascript:void(0)" role="menuitem">New Mexico</a>
+          <a href="javascript:void(0)" role="menuitem">New York</a>
+        </simple-menu>
+      </div>
+    </div>
   </div>
 </body>
 </html>
diff --git 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
@@ -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);