[Tooltip] Leaking Event Listeners / DOM Nodes

[rosslavery]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

To not leak.

What is the current behavior?

Leaking event listeners and DOM nodes

What are the steps to reproduce?

See Stackblitz
https://stackblitz.com/edit/angular-material2-issue-xna6gn?file=app/app.component.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest of all, but I've tried a variety of versions w/ same behaviour.

Is there anything else we should know?

• Possibly related to: fix(tooltip): leaking TooltipComponent references #9109
• Possibly related to: [Tooltip] Memory leak #8989

Screenshot of chrome profile - Garbage was collected before/after this run.

[neil-justice]

I think the event listener leaking is fixed by #10160, but although the commit from that PR was tagged with 5.2.4 it isn't actually in the 5.2.4 release.

[rosslavery]

I don't think so, considering the stackblitz template I posted is depending on 6.0.0-beta4 and still has the leak. Not sure if @crisbeto can confirm/deny it's related.

[jo-me]

I'm on Angular 6.1.4 with Material 6.4.6 and also discovered the tooltip leak.
Removed them for now, but it seems to be an old issue and is still problematic despite a PR that has been merged to address this...

[BaHXeLiSiHg]

I can not find how to unsubscribe from event in MediaQueryList. Possibly somebody had such problem like in my case?

That's my leak screenshots:

• MatTooltip
  
  
• TooltipComponent
  
  

Probably somebody resolved such issue...

I'm using:

"dependencies": {
    "@angular/animations": "6.0.6",
    "@angular/cdk": "6.3.0",
    "@angular/common": "6.0.6",
    "@angular/compiler": "6.0.6",
    "@angular/core": "6.0.6",
    "@angular/forms": "6.0.6",
    "@angular/http": "6.0.6",
    "@angular/material": "6.3.0",
    "@angular/platform-browser": "6.0.6",
    "@angular/platform-browser-dynamic": "6.0.6",
    "@angular/router": "6.0.6",
    "@progress/kendo-angular-buttons": "4.1.1",
    "@progress/kendo-angular-charts": "3.2.1",
    "@progress/kendo-angular-dateinputs": "3.4.2",
    "@progress/kendo-angular-dropdowns": "3.0.2",
    "@progress/kendo-angular-excel-export": "2.1.0",
    "@progress/kendo-angular-grid": "3.5.0",
    "@progress/kendo-angular-inputs": "3.1.3",
    "@progress/kendo-angular-intl": "1.4.1",
    "@progress/kendo-angular-l10n": "1.2.0",
    "@progress/kendo-angular-popup": "2.4.1",
    "@progress/kendo-angular-upload": "4.1.2",
    "@progress/kendo-data-query": "1.3.1",
    "@progress/kendo-drawing": "1.5.6",
    "@progress/kendo-theme-default": "2.54.0",
    "core-js": "2.5.7",
    "crypto-js": "3.1.9-1",
    "jsplumb": "2.4.3",
    "leaflet": "1.2.0",
    "leaflet.markercluster": "1.1.0",
    "lzma": "2.3.2",
    "material-design-icons": "3.0.1",
    "moment": "2.22.2",
    "ng2-dnd": "5.0.2",
    "ng2-responsive": "0.8.4",
    "ngx-markdown": "6.1.0",
    "roboto-fontface": "0.8.0",
    "rxjs": "6.2.1",
    "rxjs-compat": "6.2.1",
    "rxjs-tslint-rules": "4.7.2",
    "signalr-no-jquery": "0.1.8",
    "web-animations-js": "2.3.1",
    "webpack": "4.12.2",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.8",
    "@angular-devkit/build-optimizer": "0.6.8",
    "@angular-devkit/core": "0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "6.0.6",
    "@angular/language-service": "6.0.6",
    "@types/hammerjs": "2.0.35",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.0",
    "@types/leaflet.markercluster": "1.0.1",
    "@types/node": "9.4.0",
    "@types/uglify-js": "2.6.30",
    "codelyzer": "4.3.0",
    "hammerjs": "git+http://git@github.com/hammerjs/hammer.js.git",
    "jasmine-core": "3.1.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.2",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.1.2",
    "karma-coverage-istanbul-reporter": "2.0.0",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "1.1.0",
    "karma-spec-reporter": "0.0.32",
    "karma-teamcity-reporter": "1.1.0",
    "line-awesome": "github:icons8/line-awesome",
    "protractor": "5.3.2",
    "ts-node": "7.0.0",
    "tslint": "5.10.0",
    "typescript": "2.7.2",
    "uglify-es": "3.3.5"
  }

[andrewseguin]

I ran some further tests to see if this is still an issue, especially with the new Ivy renderer.

Version 6: https://angular-material2-issue-xna6gn.stackblitz.io/
Version 9 (with Ivy): https://angular-ivy-ukp9bw.stackblitz.io/

In both versions, I moused over the tooltips many times and ran garbage collection to see what comes out. It seems the Ivy version has indeed fixed the issue of holding onto old references.

In the following screenshot, you can see that version 6 held onto many references (here, 297 TooltipComponent and 36 MatTooltip)

Now, in Ivy, here is the result with only 5 MatTooltip (as expected):

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