ionic-team/ionic-framework

bug: tap click cancels gesture when used on button

Open

#22491 opened on Nov 12, 2020

View on GitHub
 (13 comments) (1 reaction) (0 assignees)TypeScript (52,503 stars) (13,381 forks)batch import
help wantedpackage: coretype: bug

Description

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

Contributor guide

Tech stack
typescriptjavascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Ionic GestureControllerAngularevent propagation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the GestureController implementation in Ionic framework source code (likely in packages/core/src/utils/gesture/). The bug occurs because the gesture's onStart/onEnd handlers may interfere with the ripple effect's event listeners. Check if the gesture calls event.stopPropagation or event.preventDefault that prevents the ripple from triggering. Consider adding a configuration option to allow ripple events or manually triggering the ripple in the gesture callbacks. The issue can be reproduced by creating a directive as shown in the report. Look at the button component's ripple implementation (e.g., ion ripple effect) to see how it listens for events and ensure compatibility.