bug(material/core): ripple element not destroyed after trigger change

[enten]

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

9.2.0

Description

The RippleRenderer register pointer up events only once: that "breaks" matRippleTrigger input from MatRipple directive and prevents destruction of new ripple elements after trigger element change.

This issue was introduced since @angular/material v9.2.1 (commit 9a16e60 in GH-18633 ).

How to fix: mark pointer up events as not registered in RippleRenderer::_removeTriggerEvents.

diff --git a/src/material/core/ripple/ripple-renderer.ts b/src/material/core/ripple/ripple-renderer.ts
index 87c1520c2..dc0296ce1 100644
--- a/src/material/core/ripple/ripple-renderer.ts
+++ b/src/material/core/ripple/ripple-renderer.ts
@@ -433,6 +433,8 @@ export class RippleRenderer implements EventListenerObject {
         pointerUpEvents.forEach(type =>
           trigger.removeEventListener(type, this, passiveCapturingEventOptions),
         );
+
+        this._pointerUpEventsRegistered = false;
       }
     }
   }

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-z9j3qe
Steps to reproduce:

1. Click on "Trigger A" button
2. Click on "Change Trigger Button" button
3. Click on "Trigger B" button

Result:

Expected Behavior

The RippleRenderer must register pointer up events each time a trigger is setup.

Actual Behavior

The RippleRenderer currently register pointer up events only once.

Environment

• Angular:
• CDK/Material: Any version since @angular/material v9.2.1
• Browser(s): Any
• Operating System (e.g. Windows, macOS, Ubuntu): Any

[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.}