Event propagation is stopped by useLongPress on Android(chrome) but not on iOS(safari)

[kofoednielsen]

Hello,

I'm experiencing difference in behavior of use-long-press between android and iOS.

On iOS if i long press my button in this example, i trigger both "clicked" and "long pressed", but on android i trigger only "long pressed" which is what i want.

import * as React from "react";
import { useLongPress } from "use-long-press";

export default function App() {
  const handlers = useLongPress(() => alert("long pressed"));
  return (
    <button
      style={{ height: "200px", width: "200px", WebkitUserSelect: "none" }}
      {...handlers()}
      onClick={() => alert("clicked")}
    >
      test
    </button>
  );
}

Here is the sandbox i used to reproduce

https://codesandbox.io/p/sandbox/uselongpress-v3-forked-srr3gq

And here is the sandbox preview

https://srr3gq.csb.app/

[kofoednielsen]

Okay i've solved it by not putting onClick on the button, but triggering my onClick function if the long press was cancelled by early release.

  const handlers = useLongPress(() => myOnLongClick(), {
    onCancel: (_, meta) => {
      if (meta.reason == LongPressCallbackReason.CancelledByRelease) {
        myOnClick()
      }
    },
  })

It still feels like quite a lot of effort to do something very common though.

[minwork]

Hey @kofoednielsen,

thank you for reporting that issue. Unfortunately I've found there are some inconsistencies between iOS and Android platforms that are hard to debug and handle (see minwork/use-long-press#5 as an example).

For your specific case, onCancel is a proper way to distinguish between long press and not long press.

I've not tried how long press handlers work in conjunction with onClick, but I imagine it may not work as expected, in a same way as would manually setting up onTouchStart, onTouchEnd with onClick handler. Hence why I've created dedicated options to listen to touch / point / click events during whole "press" lifecycle.

I understand it may look overcomplicated for such a case, but if you think of a click as a combination of different events it should make more sense.

One other thing you may try is calling event.stopPropagation() or event.preventDefault() in onFinish handler to see if that will prevent calling onClick after long press is detected (if that is what you are trying to achieve).

useLongPress(myOnLongClick, {
  onFinish(event) {
    event.stopPropagation();
    // or
   event.preventDefault();
  }
});