angular / angular/components

matTooltip jumps in conjuction with cdk-virtual-scroll-viewport

Open
#15,648 2 comments 10 reactions 0 assignees View on GitHub
area: cdk/scrolling area: material/tooltip P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?
The tooltip should remain in place when the target is replaced.

#### What is the current behavior?
The tooltip jumps to the bottom of the page.

#### What are the steps to reproduce?
There are 2 lists rendered (refreshed at 2 seconds), the bug can be seen in the first one:
- hover over the first item from the first list; you'll notice the tooltip jumps to the bottom of the page

If you hover over the first item in the second list it behaves correctly.
The second list has `templateCacheSize: 0`

https://stackblitz.com/edit/virtual-scroll-bug?file=src%2Fapp%2Fapp.component.html

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.2.11 (latest)
Material 7.3.6 (latest)
OS: macOS Mojave 10.14.3

![scrollbug](https://user-images.githubusercontent.com/235319/55224895-16ffc900-521a-11e9-92de-b5787dc103f9.gif)

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially src/app/app.component.html, and compare the two cdk-virtual-scroll-viewport lists and their templateCacheSize settings. Reproduce the two-second refresh while hovering the first item; done means the matTooltip remains in place when its target is replaced rather than jumping to the bottom of the page.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.