bug: tap click cancels gesture when used on button · Issue #22491 · ionic-team/ionic-framework · GitHub
Skip to content

bug: tap click cancels gesture when used on button #22491

Description

@infacto

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

gestures-ripple-issue

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wanteda good issue for the communitypackage: core@ionic/core packagetype: buga confirmed bug report

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions