[Tooltip] Tooltip does not vanish after route navigation with reusable routes

Bug, feature request, or proposal:

Bug

What is the expected behavior?

A displayed tooltip should vanish, after navigating to a route with a different component.

What is the current behavior?

When a RouteReuseStrategy is implemented, then the tooltip doesn’t vanish if the original route is detached while the tooltip was visible.

What are the steps to reproduce?

StackBlitz example: https://stackblitz.com/edit/angular-yvcjzp

A tooltip is displayed on button “Goto Page 2”. Clicking on the button will navigate to page 2. This will causes the tooltip from page 1 to be stuck on the screen. It will only vanish once the user navigates back to page 1 again.

Disabling reusable routes by removing the custom RouteReuseStrategy will lead to the the expected behavior again:

providers: [
    // remove this, and the tooltip starts to work properly
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
  ],

What is the use-case or motivation for changing an existing behavior?

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

“dependencies”: { “@angular/animations”: “6.0.0”, “@angular/cdk”: “^6.0.0”, “@angular/common”: “6.0.0”, “@angular/compiler”: “6.0.0”, “@angular/core”: “6.0.0”, “@angular/forms”: “6.0.0”, “@angular/http”: “6.0.0”, “@angular/material”: “^6.0.0”, “@angular/platform-browser”: “6.0.0”, “@angular/platform-browser-dynamic”: “6.0.0”, “@angular/router”: “6.0.0”, “core-js”: “^2.4.1”, “rxjs”: “^6.1.0”, “rxjs-compat”: “^6.1.0”, “zone.js”: “^0.8.26” },

Is there anything else we should know?

[vinothsubramanian]

@nharrer Thanks for the work around.

I am not very sure it is right way do native. But it worked for me inside RouteReuseStrategy -> store method

while(document.getElementsByTagName('mat-tooltip-component').length > 0) { document.getElementsByTagName('mat-tooltip-component')[0].remove(); }

Workaround StackBlitz

[princemaple]

Another take on this one… On navigation start, detach the tooltip overlay. I tried to hide it via MatTooltip.hide() but for some reason the tooltip just doesn’t go away.

import {Directive, Injectable, OnDestroy, OnInit} from '@angular/core';
import {MatTooltip} from '@angular/material/tooltip';
import {NavigationStart, Router} from '@angular/router';

import {filter} from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class TooltipCollector {
  collection = new Set<MatTooltip>();

  constructor(router: Router) {
    router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(() => {
      for (let mt of this.collection) {
        if (mt._tooltipInstance?.isVisible()) {
          mt._overlayRef?.detach();
          break;
        }
      }
    });
  }
}

@Directive({
  selector: '[matTooltip]',
})
export class HideTooltipDirective implements OnInit, OnDestroy {
  constructor(private mt: MatTooltip, private tc: TooltipCollector) {}

  ngOnInit() {
    this.tc.collection.add(this.mt);
  }

  ngOnDestroy() {
    this.tc.collection.delete(this.mt);
  }
}