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

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

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