Bug Report

Ionic version: [x] 5.x (5.4.4)

Current behavior: If the GesturesController is used on an Ionic button. The ripple-effect does not work anymore.

Expected behavior: The ripple-effect should work in this case.

Steps to reproduce: In my case: Create a directive with the Ionic GesturesController and assign it to a ion-button or ion-fab-button.

Related code:

import { GestureController } from "@ionic/angular";
/* ... */
constructor (private gestureCtrl: GestureController) {}
/* ... */
  this.gestureCtrl.create({
      gestureName: "long-press",
      el: this.nativeElement,
      threshold: 0,
      onStart: detail => {
        console.log("onStart", detail);
        this.onStart.emit(detail.event);
      },
      onEnd: detail => {
        console.log("onEnd", detail);
        this.onEnd.emit(detail.event);
      }
    });

  <ion-fab-button
    long-press
    (onStart)="log('fab:onStart')"
    (onEnd)="log('fab:onEnd')"
  >
    <ion-icon name="bug"></ion-icon>
  </ion-fab-button>

Stackblitz Demo

Other information:

I guess it's about event propagation. The ripple effects does not get any clicks. But how to fix this? I already tested some options like passive.

https://ionicframework.com/docs/utilities/gestures