Click hijacking on mobile disrupting label behavior

[peetahzee]

Mobile users are not able to click on radio / checkbox buttons within a label. Specifically, when the user clicks on the label, the browser automatically fires a click on the input; but this code hijacks it and prevents it altogether.

I made a simple reproduction of the problem here. Visit with Chrome's device mode spoofing as Nexus 5 (remember to refresh after choosing device from the dropdown), and you'll find that clicking on the label does not toggle the radio button. Clicking on the input itself works, but not the label.

[jelbourn]

This is happening because the gesture code does not account for the fact that clicking on a <label> associated with a native input will fire two click events: one for the label and one for the input. The first click event (label) is correctly handled, but the second is not and has preventDefault called on the event, stopping the selection from working. It only occurs when you emulate a mobile device because the code is checking the user agent.

Trying to find a fix.

[peetahzee]

Sorry to reopen this issue, but I believe this problem is not completely fixed yet. If there is a span inside a label, then lastLabelClickPos doesn't get set properly.

I tried applying the following fix:

// click listener
if (isEventTargetLabelDescendant(ev.target)) {
  lastLabelClickPos = {x: ev.x, y: ev.y};
}

function isEventTargetLabelDescendant(eventTarget) {
    if (!eventTarget) {
      return false;
    }
    return eventTarget.tagName.toLowerCase() == 'label' ||
        isEventTargetLabelDescendant(eventTarget.parentElement);
  }

The problem with this quick hack is that if an input is inside that label as well lastLabelClickPos will be updated on the browser-fired input click event.

Any advice?

[jelbourn]

Instead of checking for an ancestor label, the this on the event handler should be the label element. I'll see if I can get this addressed...

[peetahzee]

I tried doing that, but since the hijacker code was fired by a manual dispatchEvent call, the context was not set up properly.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.