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

[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

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:

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

[crisbeto]

You can easily create your own directive to disable ripples for a whole subtree in the DOM:

import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material/core';

@Directive({
  selector: '[disable-ripples]',
  standalone: true,
  providers: [
    {
      provide: MAT_RIPPLE_GLOBAL_OPTIONS,
      useValue: {
        disabled: true,
      },
    },
  ],
})
export class DisableRipples {}

[angelaki]

This suggestion relys on the DI model? How would this work? I need to disable the parents ripple! When clicking the options, I do not want the box' ripple to be shown. Sure I could globaly disable it and only work with launch(), but ...

[crisbeto]

Ah I see, I thought you wanted to disable the ripples on all the children, not on the parent.

[tHe-AK]

Hi @angelaki / @crisbeto, I have a similar scenario, there is a hyperlink inside mat-slide-toggle's label to open a dialog. Clicking on the hyperlink is triggering the ripple on the slide toggle. Please let me know if you find any workaround.