search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

gesture: prevent firing double mousedown events #10898

Open jelbourn opened 7 years ago

jelbourn commented 7 years ago

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 commented 6 years ago

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.