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

[angelaki]

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

(mousedown)="$event.stopPropagation()" stopped MatRipple from doing animations triggered by child components

Description

With Angular Material 14 it was possible to stop the MatRipple from getting triggered by child components utilizing a (mousedown)="$event.stopPropagation()". With Angular 15 it somehow stopped working. It is still working for simple scenarios but somehow not e.g. in MatTable

Reproduction

In this stackblitz AngularMaterial15 the column NoRipple is still triggering MatRipple while it wasn't with AngularMaterial14.

Expected Behavior

Be able to let e.g. buttons in the table not trigger the row's ripple effect.

Actual Behavior

Row's MatRipple effect always gets triggered.

Environment

• Angular: 15
• CDK/Material: 15

[crisbeto]

This isn't something we've ever supported. The supported way to disable ripples is through the disableRipple input on the directive or Angular's [@.disabled] bindings.

[angelaki]

@crisbeto but I guess that's a behavior many people are relying on? I guess just because of the many issues with the new components most are still stuck on the legacy ones.

In my scenario I have a button in a mat-table-row for showing actions for this row. When clicking the button, a context-menu opens but the row click won't happen (navigate to the record) and I don't want to show the ripple-effect. Should I actually disable the ripple on button click, wait for a timeout and re-enable it? Or is there another approach? If this is possible, feel free to edit my Stackblitz! A solution would be pretty welcome 👍 I guess my use-case is quite common. Sure it wasn't ever supported. But does a library explicitly need support common JS event handling (like stopPropagation / preventDefault)?

[crisbeto]

The mousedown events are just an implementation detail though, we never advertised the fact that it uses mousedown as being a public API. Your example doesn't work anymore, because we started using event delegation for the ripples under the hood to improve the initialization time. You might be able to work around it with CSS instead. E.g. set .mat-ripple-element { display: none; } whenever there's a :active on your row.

[angelaki]

I just checked the code and I guess the main reason is that you switched to capture. Is there a reason this can't stay a regular bubbling event? Than users where able to stop the handler from elements below the ripple effect. What is a quite common use-case imho.

Since the handler is passive anyway, captureing or not will almost have no performance impact. But yeah, sure. It could be delayed by non passive user handlers. But how about being able to switch event mode via a public API? For all I care it could be capture by default. Maybe it could be interesting to expose such an API to all event based material components?

In my opinion the CSS-solution is still quite unneat. I need to set the css on clicking the button and remove it after the ripple effect. Or did I misunderstand you?

[angelaki]

I've adopted my example a bit so you see a real world scenario: stackblitz. With AngularMaterial14 the button wouldn't trigger the ripple effect. And it still wouldn't, if the event was bubbling.

Maybe event the events could be exported, so one could rely on it? I just saw that I missed touchstart.

[angelaki]

@crisbeto what do you think about my real world scenario? Isn't this something that should be supported? At least I cannot find a nice workaround / solution for this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}