gesture: prevent firing double mousedown events

[jelbourn]

There are some situations when the gesture handler will cause two mousedown events to be fired for a single touch on mobile.

This is problematic for anything that depends on mousedown to, say, toggle an open/closed state.

[WillsB3]

I think I've also just hit the same issue, although please let me know if i've unearthed something slightly different…

Here's a reduce test case of how I found this issue in our app.

Steps to reproduce:

1. Open this Codepen
2. Open DevTools and ensure that Device Emulation is disabled (so no UA string overrides are in effect)
3. Click the icon button and notice a single console log
4. Enable Device Emulation mode and select a preset, e.g. Pixel 2
5. Refresh the page
6. Click the button again
7. Note the double console.log

My current workaround (which is a bit of a cop out, since I only need to support Chrome for this project)…

1. Ensure that you have a suitable viewport meta tag, setting this ensures that the browser disables the tap delay (See this Google Developers article).
2. Disable the Angular Material click-hijacking code as described in this comment

Here's another Codepen with my workaround applied. Perform the same reproduction steps outlined above to verify that it works.