angular / angular/components

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

Aperta
#29,133 4 commenti 4 reazioni 0 assegnatari Vedi su GitHub
area: material/core P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riprodurre il comportamento dei clic annidati nello StackBlitz collegato usando Angular 18.0.1 e CDK/Material 18.0.0, quindi esaminare la gestione degli eventi di MatRipple. Determinare come gli elementi figli potrebbero impedire il ripple del contenitore senza soluzioni alternative dipendenti dalla temporizzazione. Il lavoro è completato quando i clic sugli elementi figli designati non attivano il ripple del contenitore, mentre i normali clic sul contenitore continuano ad attivarlo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.