minwork / use-long-press

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

Not working on iOS Safari #24

Closed mjoellnier closed 2 years ago

mjoellnier commented 2 years ago

Thanks for your work on this library - its awesome and works like a charme, except on iOS :/ I already tested the possible solutions on #7 and #2 but sadly with no success.

2 solved the problem of the text selection but now on long press there appears a display zoom instead of triggering the longpress. My simplified code looks like this:

  const handleStartCaptureClick = useCallback((e: LongPressEvent<Element>) => {
      e?.preventDefault();
      e?.stopPropagation();
      e!.cancelable = true;
      e!.bubbles = false;
     // business code stuff 
    },
    [dependencies]
  );

const bind = useLongPress((e) => handleStartCaptureClick(e), {
    threshold: 200,
    onFinish: handleStopCaptureClick,
    detect: LongPressDetectEvents.BOTH,
    captureEvent: true,
  });

on the CSS side I added as suggested

    user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
minwork commented 2 years ago

Zoom may be triggered by double tap caused by #5 so try to change to detect: LongPressDetectEvents.TOUCH and see if it helps

github-actions[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.