cdkDragDrop: Logs error to the console in production

[rexidecimal9]

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

[crisbeto]

You're using a somewhat old version of the CDK. Do you see the same error with the newest version?

[rexidecimal9]

You're using a somewhat old version of the CDK. Do you see the same error with the newest version?

I tried upgrading to the latest (13.3.8) and I can confirm the error is still present.

Also I should clarify that the error is only thrown on a production build.

[Foxion7]

Bump, I have the same issue. There appears to be no way around the issue, except hiding the error. (Apologies if bumping is against any rules)

[crisbeto]

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.

[lubochka]

yep, same issue
drag-drop.mjs:461 Unable to preventDefault inside passive event listener invocation.

[crisbeto]

I tried to reproduce it in a new CLI app and I couldn't. Is it possible to isolate this further?

[Foxion7]

For me it only happens in Chrome. It seems related to: https://chromestatus.com/feature/5093566007214080

[crisbeto]

I was testing in Chrome as well. I don't think that https://chromestatus.com/feature/5093566007214080 is the issue, because we explicitly set passive: false on the listeners that we need to call preventDefault on.

[AbdulTheActivePiecer]

Hey guys,
I am having the same issue in a project I am working on, I was on v13 (Both Angular and Material packages) where this issue was occurring and I upgraded to v14 and it still exists, ran a clean install of Material with no avail, but I created a clean project and the issue wasn't occurring, I even tested the example on the CDK Drag page, and the error wasn't showing there either, I am not very sure but it might be that we all have something in common which we set up in our projects causing this.

[aftvin]

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.

[AbdulTheActivePiecer]

Thanks @aftvin, much appreciated.