Skip to content

bug(drag-and-drop): disconnecting drop list is really slow after version 19.1.5 #30737

Closed
@rubiesonthesky

Description

@rubiesonthesky

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:

  1. Change array size to be 40 000 for example
  2. Click "Hide source" in template
  3. 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):

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: cdk/drag-drop

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions