angular / angular/components

bug(MatRipple): MatRipple can not be disabled for child components

Offen
#29,133 4 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/core P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14

### Description

I once opened this issue (https://github.com/angular/components/issues/26656) and now coming back with another real-world-issue, that can't be solved neatly.

I have a selection with a ripple effect (the boxes in the screenshot) and some, optional, sub-options:

![image](https://github.com/angular/components/assets/38611461/c17c3445-cb64-49d5-b183-2cccbd6ca555)

Now every time I hit a suboption the box' ripple effect shows up. Disabling it only on inner click and re-enabling it seams like some nasty timing problem (and even looks like [ripple gets removed on mouse down etc.]).

In my opinion there **really** is a need to be able to disabler the ripple effect for some boxes inside the ripple container. There should either be a directive for disabling it or to make things easy, like I suggested in my previous post, be able to switch from `capture` to `bubbling` so it can be disabled the _vanilla Javascript way_ (`stopPropagation`).

### Reproduction

https://stackblitz.com/edit/angular-phk79p-fyt248

### Expected Behavior

Ripple should not show up on clicking some container's child elements.

### Actual Behavior

Ripple cannot be disabled for some inner clicks.

### Environment

- Angular: 18.0.1
- CDK/Material: 18.0.0

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduzieren Sie das Verhalten verschachtelter Klicks im verlinkten StackBlitz mit Angular 18.0.1 und CDK/Material 18.0.0 und untersuchen Sie anschließend die Ereignisbehandlung von MatRipple. Ermitteln Sie, wie untergeordnete Elemente den Ripple des übergeordneten Elements ohne zeitabhängige Behelfslösungen unterdrücken könnten. Als erledigt gilt die Aufgabe, wenn Klicks auf dafür vorgesehene untergeordnete Elemente den Ripple des Containers nicht auslösen, während normale Klicks auf den Container weiterhin funktionieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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