Ion-item-sliding doesn't swipe along with Ionic Gestures

Hello.
I tried to use a long-press gesture on ion-item-sliding, but it breaks the swiping effect.
It can be reproduced by creating a blank ionic app and replace the home page code as follows:
home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title> Blank </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-label>No long press gesture</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option>Button</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option>Button</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item #longPress>
        <ion-label>Long press gesture applied</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option>Button</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option>Button</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

home.page.ts

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GestureController, ToastController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  @ViewChild('longPress') longPress: any;
  private pressTimeoutId: any;
  private pressTimeout = 350;
  constructor(
    private gestureCtrl: GestureController,
    private toastCtrl: ToastController
  ) {}

  ngAfterViewInit(): void {
    const gesture = this.gestureCtrl.create(
      {
        el: this.longPress.el,
        threshold: 0,
        gestureName: 'longPress',
        onStart: (detail) => {
          this.onStart(detail.event);
        },
        onEnd: () => {
          this.onEnd();
        },
        onMove: () => {
          this.onEnd();
        },
      },
      true
    );
    gesture.enable(true);
  }

  async onPress(): Promise<void> {
    const toast = await this.toastCtrl.create({
      message: 'Long pressed',
      duration: 2000,
      position: 'top',
    });
    toast.present();
  }

  private onStart(event: UIEvent): void {
    this.pressTimeoutId = setTimeout(() => {
      this.pressTimeoutId = null;
      this.onPress();
    }, this.pressTimeout);
  }

  private onEnd(): void {
    if (this.pressTimeoutId) {
      clearTimeout(this.pressTimeoutId);
      this.pressTimeoutId = null;
    }
  }
}

I googled for this issue with no success.
Does anyone have any idea how to solve this?
Thanks

1 post - 1 participant

Read full topic