Polymer Gestures preventing programmed clicks on mobile

[myfrom]

Description

When trying to simulate a click event on input (input.click()) from other event listener, Polymer Gestures stops that click event.

Live Demo

https://jsfiddle.net/myfrom/rypqaxck/18/

Steps to Reproduce

1. Open a page on phone or simulate mobile device with DevTools
2. Create a button and an input (best with <input type="file"> as it opens a dialog when clicked)
3. Add click event listener to that button and call click() function on the input

Expected Results

Input file is clicked; in case of file input, dialog opens

Actual Results

Nothing happends

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

I could check only on Chrome but I think it should happen on other mobile browsers too.

Versions

• Polymer: v2.6.0
• webcomponents: v1.2.2

Additional information

I did a bit of digging while trying to debug it and found out that it's caused by mouseCanceller() function (here).

However, I found a workaround:
Instead of calling input.click(), sending non-bubbling event will work:

input.dispatchEvent(new MouseEvent('click', { bubbles: false }))

I'm not sure if it can be fixed without breaking something else but I wanted to post it at least to share the workaround if someone encounters the same problem 😉

[platosha]

Happens for me too.

Another workaround I found: call Polymer.Gestures.resetMouseCanceller(); just before the .click().

I’ve also noticed, that ehe check around these lines https://github.com/Polymer/polymer/blob/master/lib/utils/gestures.js#L163-L170 relies on event.sourceCapabilities, which is null in case of the click events programmatically dispatched by HTMLElement.prototype.click()on Chrome Android.

[LarsDenBakker]

Having this issue as well. The gestures module is very intrusive in our app, canceling events and modifying native browser behavior. Is there a way to disable it globally?

[chrisolof]

Also experiencing this on a project where we utilize one polymer-reliant web component. Very intrusive and breaks other JS in the project. I haven't found a way to disable this globally. Our work-around in this case will be swapping out the polymer-reliant component for a polymer-free component.

[LarsDenBakker]

I've created a stackblitz which demonstrates the issue: https://stackblitz.com/edit/lit-element-example-tfopfl?embed=1&file=index.js

I am loading the gestures module, then creating a div which does a programmatic click on a button. On desktop it works, on mobile it doesn't work. This is really a major bug as we can't use a standard browser feature. Is there a way we can at least make this behavior configurable?