ionic-team / ionic-team/ionic-framework

bug: tap click cancels gesture when used on button

Offen
#22,491 15 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
help wanted package: core type: bug
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

# 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)

![gestures-ripple-issue](https://user-images.githubusercontent.com/60390085/98969866-92a5ab00-250f-11eb-8834-499419c44ccc.gif)

**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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.