fix(material/core): mat-ripple-element is not fired on disable (#22537)

* fix(material/core): `mat-ripple-element` is not fired on disable

When button becomes disabled after the ripple initiated and before the
ripple animation is completed, it will somestimes not fire the
`mat-ripple-element` correctly. Adding the `fadeOutAll()` method when
set to disable will fix this issue.

Fixes #22520

* fix(material/core): mat-ripple-element is not fired on disable

When button becomes disabled after the ripple initiated and before the
ripple animation is completed, it will sometimes not fire the
`mat-ripple-element` correctly. Add a `fadeOutAllNonPersistent` method
in `ripple-renderer.ts` to fade out all non persistent ripples and let
it be triggered on disable. It should fix this issue.

Fixes #22520

* fix(material/core): mat-ripple-element is not fired on disable

When button becomes disabled after the ripple initiated and before the
ripple animation is completed, it will sometimes not fire the
`mat-ripple-element` correctly. Add a `fadeOutAllNonPersistent` method
in `ripple-renderer.ts` to fade out all non persistent ripples and let
it be triggered on disable. It should fix this issue.

Fixes #22520

* fix(material/core): mat-ripple-element is not fired on disable

When button becomes disabled after the ripple initiated and before the
ripple animation is completed, it will sometimes not fire the
`mat-ripple-element` correctly. Add a `fadeOutAllNonPersistent` method
in `ripple-renderer.ts` to fade out all non persistent ripples and let
it be triggered on disable. It should fix this issue.

Fixes #22520

(cherry picked from commit 491d2ec)

Author: cynthialong0-0

src/material/core/ripple/ripple-renderer.ts

@@ -206,6 +206,15 @@ export class RippleRenderer implements EventListenerObject {
     this._activeRipples.forEach(ripple => ripple.fadeOut());
   }
 
+  /** Fades out all currently active non-persistent ripples. */
+  fadeOutAllNonPersistent() {
+    this._activeRipples.forEach(ripple => {
+      if (!ripple.config.persistent) {
+        ripple.fadeOut();
+      }
+    });
+  }
+
   /** Sets up the trigger event listeners */
   setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>) {
     const element = coerceElement(elementOrElementRef);

src/material/core/ripple/ripple.spec.ts

@@ -646,6 +646,24 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
     });
 
+    it('fades out non-persistent ripples when disabled input is set',
+       fakeAsync(() => {
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      controller.ripple.launch(0, 0, { persistent: true });
+
+      tick(enterDuration);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(2);
+
+      spyOn(controller.ripple, 'fadeOutAllNonPersistent').and.callThrough();
+      controller.disabled = true;
+      fixture.detectChanges();
+
+      expect(controller.ripple.fadeOutAllNonPersistent).toHaveBeenCalled();
+
+      tick(exitDuration);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+    }));
+
     it('allows specifying custom trigger element', () => {
       let alternateTrigger = fixture.debugElement.nativeElement
         .querySelector('.alternateTrigger') as HTMLElement;

src/material/core/ripple/ripple.ts

@@ -91,6 +91,9 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
   @Input('matRippleDisabled')
   get disabled() { return this._disabled; }
   set disabled(value: boolean) {
+    if (value) {
+      this.fadeOutAllNonPersistent();
+    }
     this._disabled = value;
     this._setupTriggerEventsIfEnabled();
   }
@@ -141,6 +144,11 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
     this._rippleRenderer.fadeOutAll();
   }
 
+  /** Fades out all currently showing non-persistent ripple elements. */
+  fadeOutAllNonPersistent() {
+    this._rippleRenderer.fadeOutAllNonPersistent();
+  }
+
   /**
    * Ripple configuration from the directive's input values.
    * @docs-private Implemented as part of RippleTarget

tools/public_api_guard/material/core.d.ts

@@ -261,6 +261,7 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
     unbounded: boolean;
     constructor(_elementRef: ElementRef<HTMLElement>, ngZone: NgZone, platform: Platform, globalOptions?: RippleGlobalOptions, _animationMode?: string | undefined);
     fadeOutAll(): void;
+    fadeOutAllNonPersistent(): void;
     launch(config: RippleConfig): RippleRef;
     launch(x: number, y: number, config?: RippleConfig): RippleRef;
     ngOnDestroy(): void;
@@ -358,6 +359,7 @@ export declare class RippleRenderer implements EventListenerObject {
     _removeTriggerEvents(): void;
     fadeInRipple(x: number, y: number, config?: RippleConfig): RippleRef;
     fadeOutAll(): void;
+    fadeOutAllNonPersistent(): void;
     fadeOutRipple(rippleRef: RippleRef): void;
     handleEvent(event: Event): void;
     setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>): void;