Description
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
19.1.3
Description
After #30514 , disconnecting long list of drag items slows down browser so much that it freezes. Locally reverting that change fixes the issue and you get the earlier behavior.
The use case may be little bit unconventional, but we have separate list for "items to buy" and then items for being in "shopping basket" (using one of the examples in website). They are in different components and connected by one parent component. Everything works greatly until the "product selection" component is destroyed. It works when there are sane number of items ,say 500. But when there are over 4000 items, the browser becomes unusable.
I'm able to repro this same behavior in Stackblitz. Though, it needs a lot more items before it starts to break: 40000.
Our actual code is years old, so it may be that it would be instructed to write it another way.
Is there a way that this._syncItemsWithRef();
would not be called for every item in a row if it happens really quickly? Or is there a better way to disconnect the drop lists before the component is destroyed? Or could there be a setting to opt into the old behavior?
Reproduction
StackBlitz link: https://1owdqzmq.stackblitz.io
Steps to reproduce:
- Change array size to be 40 000 for example
- Click "Hide source" in template
- Notice how slow everything becomes
With smaller array, it's not noticeable at all.
Expected Behavior
It should not be so taxing operation that it basically crashes browser tab
Actual Behavior
Crashes browser tab :/
Environment
- Angular: 19.2.7
- CDK/Material: ^19.2.0
- Browser(s): chrome, firefox
- Operating System (e.g. Windows, macOS, Ubuntu):