bug(mat-tooltip): tooltip remains open after bound element is removed from a cdk-virtual-scroll-viewport

[amayer42]

Reproduction

When a mat-tooltip is applied to an element within a cdk-virtual-scroll-viewport that can be removed from the list bound to the *cdkVirtualFor directive, the tooltip will not always be removed when it's corresponding anchor element is removed.

https://stackblitz.com/edit/tooltip-cdk-virtual-scroll-issue?file=src/app/example-component.html

Steps to reproduce:

Variant 1:

1. Scroll to the bottom of the list.
2. Hover the bottom-most button of the list to reveal its tooltip.
3. Click the button to remove it.
4. Notice that the tooltip does not disapear as it should, it moves to the upper left of the page. It will remain until the scrollbar of the list disappears, and then the list is reset. Resetting prior to the scrollbar disappearing will not remove the tooltip from the page. This is repeatable for all bottom-most button tooltips until the scroll bar disappears, at that point, you will start noticing the 2nd strange behavior (though it is also separately replicable).

Variant 2:

1. Remove items from the list until the scroll bar disappears.
2. Hover the bottom-most button of the list to reveal its tooltip.
3. Click the button to remove it.
4. Notice that the tooltip does not disapear as it should. It will remain until all items are removed from the list, the list is reset, the dialog is re-initialized (essentially the list being reset). This is repeatable for all bottom-most button tooltips until the last item in the list is removed.

Expected Behavior

The tooltip should be removed along with the element it is bound to.

Actual Behavior

The tooltip remains open when the element it is bound to is removed.

Environment

See linked StackBlitz dependencies, but:

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

[crisbeto]

I believe that this is a duplicate of #19365.

[amayer42]

Thought I looked for it... Thanks for finding it :).

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