ionic-team / ionic-team/ionic-framework
bug: tap click cancels gesture when used on button
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
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:**
```ts
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);
}
});
```
```html
```
### [Stackblitz Demo](https://stackblitz.com/edit/ionic-gestures-ripple-bug?embed=1&file=src/app/tab1/tab1.page.html)

**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
Research direction
Start with the GesturesController usage in the provided directive and reproduce the issue using the linked StackBlitz demo with ion-button and ion-fab-button. Trace how the gesture handles click or event propagation, then verify that the Ionic ripple effect still works while the long-press gesture is enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100