fix(material/core): resolve memory leak by removing event listeners from the ripple element

[arturovt]

We were adding transitionend and transitioncancel event listeners, but never removed it. I didn't want to touch the RippleRef class since that would be a change to the public API.

[devversion]

Are you sure this actually is a memory leak? I was thinking about it when adding the event listeners but it seemed fine in profiling and GC.

#24482 (comment)

[arturovt]

Hey Paul, I've double checked it in other browser (Firefox) and the memory leak exists (note I've renamed div to app-ripple through const ripple = document.createElement('app-ripple'); ripple.classList.add('mat-ripple-element'). So it's just easier to find the DOM node in the snapshot):

The object ID in the tree is 0x1246115000. Now, let's query the snapshot to find an actual "reference holder":

The capture map shows that the DOM node is being captured by lambda (which is () => this._finish....).

That wouldn't be a memory leak in Chrome (because V8's garbage collector is really smart about reference counting) if the lambda didn't capture this, for instance el.addEventListener('some_event', () => el.remove()).

[devversion]

LGTM overall. I re-checked and was able to reproduce this. Thanks @arturovt

[devversion]

Not sure if _startFadeOutTransition is the best reference here, but thanks for the comment 👍

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