Fix label tap by checking matched label pairs

Fixes #4717
Polymer · Jan 30, 2018 · a77d64e · a77d64e
1 parent a73fdd7
commit a77d64e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/lib/utils/gestures.html b/lib/utils/gestures.html
@@ -97,6 +97,10 @@
   /** @type {(function(MouseEvent): void | undefined)} */
   GestureRecognizer.prototype.click;
 
+  // keep track of any labels hit by tghe mouseCanceller
+  /** @type {!Array<!HTMLLabelElement>} */
+  const clickedLabels = [];
+
   // touch will make synthetic mouse events
   // `preventDefault` on touchend will cancel them,
   // but this breaks `<input>` focus and link clicks
@@ -115,14 +119,31 @@
     mouseEvent[HANDLED_OBJ] = {skip: true};
     // disable "ghost clicks"
     if (mouseEvent.type === 'click') {
+      let labels = [];
+      let clickFromLabel = false;
       let path = mouseEvent.composedPath && mouseEvent.composedPath();
       if (path) {
         for (let i = 0; i < path.length; i++) {
+          if (path[i].nodeType === Node.ELEMENT_NODE) {
+            if (path[i].localName === 'label') {
+              labels.push(path[i]);
+            } else if (path[i].labels) {
+              let ownerLabels = path[i].labels;
+              for (let j = 0; j < ownerLabels.length; j++) {
+                clickFromLabel = clickFromLabel || clickedLabels.indexOf(ownerLabels[j]) > -1;
+              }
+            }
+          }
           if (path[i] === POINTERSTATE.mouse.target) {
+            // commit tracked labels to "clickedLabels"
+            clickedLabels.push(...labels);
             return;
           }
         }
       }
+      if (clickFromLabel) {
+        return;
+      }
       mouseEvent.preventDefault();
       mouseEvent.stopPropagation();
     }
@@ -137,6 +158,8 @@
     for (let i = 0, en; i < events.length; i++) {
       en = events[i];
       if (setup) {
+        // reset clickLabels array
+        clickedLabels.length = 0;
         document.addEventListener(en, mouseCanceller, true);
       } else {
         document.removeEventListener(en, mouseCanceller, true);

diff --git a/test/smoke/label-click.html b/test/smoke/label-click.html
@@ -0,0 +1,25 @@
+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+
+<body>
+  <label id="label" for="checkme">Native checkbox</label>
+  <input type="checkbox" id="checkme">
+</body>
+
+</html>