bug(MatTooltip): MatTooltip not work well with cdk-virtual-scroll-viewport

[trungphan]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:

1. Run this StackBlitz: https://stackblitz.com/edit/angular-1f53g9
2. Click remove button for each row and the tooltips do not disappear.

Expected Behavior

What behavior were you expecting to see?
The tooltip needs to disappear when the row is removed

Actual Behavior

What behavior did you actually see?
The tooltip stay when a row is removed. This is likely similar to this issue: #6634 because the Angular CDK Virtual Scroller simply detach a view instead of removing it to reuse this view for other rows.

Environment

• Angular:
• CDK/Material:
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Mac OS

[trungphan]

Just an idea here. Can the MatTooltip use MutationObserver to know if the host element is removed from the dom, and hence remove itself?

[crisbeto]

There are a couple of issues here: the first is the one you mentioned about the view being recycled, and the second is that our cleanup logic depends on the animation being finished. We have an event listener that's supposed to close tooltips on any body click, but they don't fire in this case, because the exit animation never starts.

Since we know how long the animation is supposed to take, we can add a fallback setTimeout that'll clear it if nothing happens within the expected time. The problem is that adding another timeout will probably break a lot of tests in g3. I gave it a quick try and it broke 5 of our own tests.

[trungphan]

Instead of using setTimeout, what if you use another animation and listen for transition end event that is triggered slightly after the exit animation end event. This way, you can also easily debug animation by slowing it down and hopefully tests will also pass.

[crisbeto]

The problem is that the view is detached from the change detection tree before the property that triggers the animation has even been changed so the transitionend won't fire in this case either. We could trigger the animation by directly changing a class in the DOM, then we'd have to refactor the tooltip so it doesn't use the Angular animations module which may break even more tests.

[trungphan]

I'm guessing internally, the component uses Angular transition and I don't know much about Angular transition to comment. But for this particular case, a manual css transition could help you to detect if a DOM is removed. Specifically, the transitioncancel will be fired when the DOM is removed. Since the transitioncancel can be fired in some other cases, when the transitioncancel event fired, you can also verify that the element is not attached to the DOM or even generically if the element is not visible to the screen (e.g. display:none).

Also, if you have a code to check if an element is attached to the DOM, please make sure that it works shadow DOM since we're using shadow DOM.

All of theses sound complex, but I got a feeling that we may not even need to do all of these. It can be very simple: just when the transitioncancel or transitionend is fired, then remove the tooltip. That probably handles all cases.