[DragDrop] Model & view update during drag breaks drag & drop

[mstawick]

Reproduction scenario is trivial. This can happen in muli-user environments where data updates are pushed and merged live.

Reproduction

https://stackblitz.com/edit/components-issue-crtxst?file=src%2Fapp%2Fexample-component.html

1. Open repro - there are 4 buttons,
2. Wait 3 seconds - there are 2 different buttons. They can be dragged,
3. Now refresh the page, and as soon as it loads start dragging "Button 1". Hold it,
4. After 3 seconds model is updated, dragging is cancelled, and dragging is no longer possible.

On stackblitz, I don't see any errors logged. However, on my production app, I got something logged via Sentry that points to this transpiled piece of code in fesm2015/drag-drop.js:

1078                 (event) => {
1079                     if (!event || (event.target === this._preview && event.propertyName === 'transform')) {
1080                         this._preview.removeEventListener('transitionend', handler);
1081                         resolve();
1082                         clearTimeout(timeout);
1083                     }
1084                 }))));

with error being:
TypeError: Cannot read property 'removeEventListener' of null

Expected Behavior

Dragging should be possible with new items

Actual Behavior

Dragging doesn't work until page is reloaded

Environment

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

[mstawick]

As a workaround, is there any way to cancel any ongoing drag & drop?

[Achilles1515]

As a workaround, is there any way to cancel any ongoing drag & drop?

Regarding a workaround, here is one....kind of, by using a setter for the ngFor iterable and some private methods.

https://stackblitz.com/edit/components-issue-yuzqth?file=src/app/example-component.ts

[mstawick]

That's great, thanks!

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