Custom Gestures blocks native Ion-Card behaviour

Ionic Framework
1

I’ve created a custom longpress gesture in Ionic Vue (even though the framework doesn’t really matter for this questions).

The problem is that this gesture blocks the native behaviour on ion-cards, where it adds the ion-activated which triggers ripple effects and css transforms.

const longpress = createGesture({
  el: el.value.$el,
  gestureName: "longpress",
  onStart: (ionic_event) => {
    if (timer.value) clear_timer()
    timer.value = setTimeout(() => {
      if (callback) callback(ionic_event.event)
    }, interval)
  },
  onEnd: (ev) => {
    clear_timer()
  },
})

longpress.enable(true)

//...

<ion-card class="place-item ion-activatable" ref="place_item">
  <ion-ripple-effect />
  <media-items />
  <ion-card-content>
    <ion-card-title>{{ title }}</ion-card-title>
    <ion-card-subtitle>{{ subtitle }}</ion-card-subtitle>
    <ion-text>{{ description }}</ion-text>
  </ion-card-content>
</ion-card>

I’ve tried experimenting with the properties specified in the docs, and event tried setting priority to negative value – but nothing seems to work.

Does anyone know how to make these gestures works together? I’d like to avoid re-creating the behaviour in my custom gesture.

Cheers :v:t3:

2

Found a possible solution myself on this Github link: bug: tap click cancels gesture when used on button · Issue #22491 · ionic-team/ionic-framework · GitHub

window.addEventListener(
  "ionGestureCaptured",
  (event) => {
    if (event.detail?.gestureName === "longpress") {
      event.stopPropagation()
    }
  },
  true,
)