diff --git a/lib/utils/gestures.html b/lib/utils/gestures.html index 94cd964dbd..ca38ec3173 100644 --- a/lib/utils/gestures.html +++ b/lib/utils/gestures.html @@ -128,17 +128,13 @@ function matchingLabels(el) { /** @type {!Array} */ let labels = el.labels; - // IE doesn't have `labels` and Safari doesn't populate `labels` if element is in a shadowroot. + // IE doesn't have `labels` and Safari doesn't populate `labels` + // if element is in a shadowroot. + // In this instance, finding the non-ancestor labels is enough, + // as the mouseCancellor code will handle ancstor labels if (!labels || !labels.length) { labels = []; let root = el.getRootNode(); - // find all labels that are ancestors - let cur = el.parentNode; - while (cur !== root) { - if (cur.localName === 'label') { - labels.push(/** @type {!HTMLLabelElement} */(cur)); - } - } // if there is an id on `el`, check for all labels with a matching `for` attribute if (el.id) { let matching = root.querySelectorAll(`label[for = ${el.id}]`); @@ -168,28 +164,28 @@ 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]); + clickedLabels.push(path[i]); } else if (canBeLabelled(path[i])) { let ownerLabels = matchingLabels(path[i]); + // check if one of the clicked labels is labelling this element 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 one of the clicked labels was labelling the target element, + // this is not a ghost click if (clickFromLabel) { return; } diff --git a/test/unit/gestures.html b/test/unit/gestures.html index b3ad058953..465abf2fe6 100644 --- a/test/unit/gestures.html +++ b/test/unit/gestures.html @@ -564,11 +564,12 @@ let el = document.createElement('x-native-label'); document.body.appendChild(el); let target = el.$.label; + // simulate the event sequence of a touch on the screen let touches = [{ clientX: 0, clientY: 0, identifier: 1, - // target is set to the element with `addEventListener`, which is app + // target is set to the element with `addEventListener`, which is `target` target }]; let touchstart = new CustomEvent('touchstart', {bubbles: true, composed: true}); @@ -577,9 +578,11 @@ let touchend = new CustomEvent('touchend', {bubbles: true, composed: true}); touchend.touches = touchend.changedTouches = touches; target.dispatchEvent(touchend); + // simulate a mouse click on the label let click = new MouseEvent('click', {bubbles: true, composed: true}); target.dispatchEvent(click); - assert.equal(el.$.check.checked, true); + // check that the mouse click on the label will activate the checkbox + assert.equal(el.$.check.checked, true, 'checkbox should be checked'); document.body.removeChild(el); }); });