cdk-virtual-scroll-viewport: modified items, get mixed up when scrolling

[rmeshksar]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have a list with virtual scrolling. Upon clicking on an item, a class is getting added to that item in order to highlight it. But upon scrolling up and down, some other items are also highlighted.

Reproduction

Steps to reproduce:

1. Go to https://stackblitz.com/edit/angular-phbdvk
2. Click on some items in the list to highlight them.
3. Scroll down in the list

Expected Behavior

Only items that have been clicked on, should be highlighted.

Actual Behavior

Other items in the list are also highlighted. Also keep scrolling and every time, different items are highlighted.

If I set templateCacheSize=0, it works fine.

I know it is better to set a model rather than DOM manipulation in the code, but this change in our big code set, needs a huge refactoring.

Environment

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

[aposi324]

I am running into the same issue with input controls caching display values for null backing data.

[crisbeto]

The virtual scrolling module reuses elements in order to keep the DOM size low. Since you're modifying the elements yourself, there's no way for it to know that something has changed. You should make the modifications using data bindings instead.

[angular-automatic-lock-bot[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.}