components: cdkDragDrop: Logs error to the console in production
What are you trying to do?
I setup the drag drop functionality for angular cdk and everything works fine functionality wise. But it throws this error Unable to preventDefault inside passive event listener invocation.
on drag-ref.ts:655. This only happens when actually moving the item, if you are just holding the drag nothing is thrown. This error only appears in production. Any help would be appreciated on this.
What troubleshooting steps have you tried?
- Tried disabling pointer events when dragging
- Tried updating to most recent minor version
Reproduction
<div class="scrollable-container" #productsList="cdkDropList" cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let product of availableProducts | search : 'name' : productSearch">
<div
cdkDrag
(cdkDragStarted)="dragStart(product)"
class="product-item"
>
<div class="product-list-detail">
<h5 class="p-mb-2">{{product.name}}</h5>
<span class="product-category">{{product.active ? 'Active' : 'Inactive'}}</span>
</div>
<div class="product-list-action">
<h6>{{product.price}}</h6>
</div>
</div>
</div>
</div>```
### Environment
- Angular: 11.0.9
- CDK/Material: 11.2.12 (and 11.0.9).
- Browser(s): Brave, Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu, Windows
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 2
- Comments: 21 (4 by maintainers)
In my case it has something to do with session recorders. I use LogRocket for that purpose, and the error won’t pop up when session recording is disabled.
It’s also happening with Sentry Replay. Removing Sentry Replay fix the issue for me
https://docs.sentry.io/platforms/javascript/guides/angular/?original_referrer=https%3A%2F%2Fwww.google.com%2F
It also started happening to me when using Sentry Replay. Looks like it’s the same issue as https://github.com/angular/angular/issues/45020.
The workaround suggested there by @VolodymyrBaydalka seems to work.
I’ve added the above line in my polyfills.ts file.
I haven’t had time to look into this yet, but I wanted to note that this is a
console.error
, not a hard error so users won’t be affected by it.