search

minwork / use-long-press

React hook for detecting click (or tap) and hold event
MIT License
120 stars 12 forks source link

Single tap on touch device may trigger onStart and onCancel twice #5

Closed minwork closed 3 years ago

minwork commented 3 years ago

As @chriswardo discovered, there is an edge case when making single quick tap using touch device, that may trigger onStart / onCancel callbacks twice due to how click simulation works on those types of devices. This happens when detect is set to both.

This issue can be reproduced in for example chrome device emulator but is hard to counterfeit due to the fact that the simulated MouseEvent (MouseDown -> MouseUp) happens after TouchEnd so it can’t be easily detected without some nasty “ifology”.

Another problem coming out of that fact is that this scenario is difficult to reproduce in test because MouseEvent happening after TouchEvent should be handled as a separate long press attempt.

Also solutions suggested in similar cases may not be valid in React due to synthetic events, because it seems that calling preventDefault for TouchEvent doesn’t prevent MouseEvent from being dispatched.

Possible current solution for that case would be using onClick to detect tap, or choosing either to detect only mouse events or touch events.

if anyone know any solution for that case feel free to provide PR or write it in the comment below.

minwork commented 1 year ago

Resolved by removing detect: 'both' option in v3. This option will be replaced by supporting PointerEvents in the future