bug(MatRipple): mat-ripple-element is not fired correctly on disable

[cynthialong0-0]

Working on resolving a bug that MatRipple stuck in the focus state. When on disable, sometimes the ripple cannot fade out the ripple in time. After investigation, it seems that there is opportunity when the mouseup event is not captured before setting to disable and mat-ripple-element is not fired correctly .

Reproduce the error

Live example in stackblitz

Step to reproduce

1. Immediately click the icon button when move the cursor on it.
2. Try couple of times if you cannot see the state stuck after you move away the cursor.
3. Try more times after you reproduce it - you will see the color of the state becomes darker, since multiple mat-ripple-elements are not fired correctly.

Expected behavior

mat-ripple-element should be always deleted on mouse up

Environment

Angular Material: 11.2.9
rxjs: 6.6.7
Browser: Chrome
Operating system: Mac

Fix

On disable, it should call fadeOutAll() method to make sure all mat-ripple-elements are fired. So I propose to have this change on the ripple disabled variable:

  set disabled(value: boolean) {
    if (value) {
      this.fadeOutAll();
    }
    this._disabled = value;
    this._setupTriggerEventsIfEnabled();
  }

[jelbourn]

cc @devversion who I think was the last one to do major work on the ripple

Just to make sure I fully understand the reproduction- the issue is that the button becomes disabled after the ripple has been initiated, but before the ripple animation completes and the element is removed?

[cynthialong0-0]

cc @devversion who I think was the last one to do major work on the ripple

Just to make sure I fully understand the reproduction- the issue is that the button becomes disabled after the ripple has been initiated, but before the ripple animation completes and the element is removed?

Yes I believe so.

[kseamon]

Relates to internal ticket 184573511