MD Settings: fix incorrect behavior with Enter on bluetooth item's icon-button.

chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Polymer element for displaying a bluetooth device in a list.
  */
 
 Polymer({
   is: 'bluetooth-device-list-item',
 
   behaviors: [I18nBehavior],
 
   properties: {
     /**
      * The bluetooth device.
      * @type {!chrome.bluetooth.Device}
      */
     device: {
       type: Object,
     },
   },
 
+  listeners: {
+    'keydown': 'onKeyDown_',
+  },
+
+  /**
+   * This is necessary, otherwise pressing enter will first trigger iron-list's
+   * keydown handler and intefere with icon-button's on-tap behavior.
+   * @param {!Event} event
+   * @private
+   */
+  onKeyDown_: function(event) {
+    if (event.key == 'Enter' &&
+        Polymer.dom(event).rootTarget ==
+            this.$$('button[is="paper-icon-button-light"]')) {
+      event.stopPropagation();
+    }
+  },

[dschuyler, 2017/06/20 18:46:51]

When we have a chance, I'd like to chat about whether this should be made into a
behavior (stevenjb@'s suggestion), or if it's really a one-off. And if it's a
one-off, I'd like to explore (or push for) adjusting the UI here so that it
doesn't need special handling.

[scottchen, 2017/06/20 19:17:19]

I think we might've talked about this before, but basically I had to do this in
FocusRowBehavior to avoid iron-list's Enter-key listener causing problems, but
FocusRowBehavior can't be applied here, because the behavior assumes the row
itself should not focusable (which is not the case here).

So possible solutions:
1) tweak focus-row-behavior to optionally allow the row itself to be focused
(maybe based on a flag?) and behave accordingly, then apply the behavior here.
2) make the UI such that "row itself is focusable & actionable, but also has
focusable & actionable controls as children"  is not a thing.

Also as a side note, I personally feel like network/bluetooth's row behavior is
weird, because pressing the Enter key on a focused row does completely different
things (i.e. connects if not already connected, or goes to a subpage if it is
connected).

[stevenjb, 2017/07/10 22:48:53]

Can this be done more simply like:

<button ... on-keydown="doNothing_">

doNothing_: function(event) {
  event.stopPropagation();
}

?

[scottchen, 2017/07/12 19:12:49]

Looks like yes we can! PTAL.

+
   /**
    * @param {!Event} event
    * @private
    */
   onMenuButtonTap_: function(event) {
     var button = /** @type {!HTMLElement} */ (event.target);
     var menu = /** @type {!CrActionMenuElement} */ (this.$.dotsMenu);
     menu.showAt(button);
     event.stopPropagation();
   },
@@ skipping 95 matching lines @@
       case 'tablet':
         return 'settings:tablet';
       case 'mouse':
         return 'settings:mouse';
       default:
         return device.connected ?
             'settings:bluetooth-connected' : 'settings:bluetooth';
     }
   },
 });