MdTooltip: navigating to a new page while the tooltip is still visible throws an error

[rolandjitsu]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should not throw an error.

What is the current behavior?

If you navigate away from a page (via routing) where a tooltip is currently being displayed, it throws a Uncaught TypeError: Cannot read property 'dispose' of null.
Stacktrace:

Uncaught TypeError: Cannot read property 'dispose' of null
    at MdTooltip._disposeTooltip (http://localhost:3000/node_modules/@angular/material/material.umd.js:8573:25)
    at SafeSubscriber.eval [as _next] (http://localhost:3000/node_modules/@angular/material/material.umd.js:8559:19)
    at SafeSubscriber.__tryOrUnsub (http://localhost:3000/node_modules/rxjs/Subscriber.js:223:16)
    at SafeSubscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:172:22)
    at Subscriber._next (http://localhost:3000/node_modules/rxjs/Subscriber.js:125:26)
    at Subscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:89:18)
    at Subject.next (http://localhost:3000/node_modules/rxjs/Subject.js:55:25)
    at TooltipComponent._afterVisibilityAnimation (http://localhost:3000/node_modules/@angular/material/material.umd.js:8686:26)
    at _View_TooltipComponent0._handle_state_0_0 (/MdTooltipModule/TooltipComponent/component.ngfactory.js:62:30)
    at Array.forEach (native)
MdTooltip._disposeTooltip @ tooltip.js:115
(anonymous) @ tooltip.js:101
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
TooltipComponent._afterVisibilityAnimation @ tooltip.js:228
_View_TooltipComponent0._handle_state_0_0 @ component.ngfactory.js:62
AnimationSequencePlayer._onFinish @ core.umd.js:7862
AnimationSequencePlayer._onNext @ core.umd.js:7845
WebAnimationsPlayer._onFinish @ platform-browser.umd.js:192

What are the steps to reproduce?

Have a simple page with a tooltip and a second page to navigate to via the angular router. Show the tooltip and navigate away to the second page before the tooltip is removed (within the 1.5s window).

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

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

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

2.0.0-alpha.10

Is there anything else we should know?

[andrewseguin]

The edge case here is that if the tooltip is in the process of hiding when component is destroyed, then the component attempts to dispose twice. First on ngOnDestroy and again when "the animation is completed" (even though its no longer on the page)

[rolandjitsu]

Ok, so there should be an easy fix for this I guess. Just check, when the animation is completed, if the reference still exists before disposing.

[benjamincharity]

@andrewseguin I'm using the latest from master, but if a tooltip is still visible and the user navigates to a new page I see the same error.

https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.ts#L148-L153

Wrapping this._overlayRef.dispose() in an if() fixed it for me.

    MdTooltip.prototype._disposeTooltip = function () {
        if (this._overlayRef) {
            this._overlayRef.dispose();
        }
        this._overlayRef = null;
        this._tooltipInstance = null;
    };

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