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.

[rexidecimal9]

Thanks @aftvin , we also use logrocket and that seems to be the issue

[webcat12345]

We are having the same issue and we use log rocket as well.

[dominikbugar]

I have the same problem. The error appears in the production environment only (it is not present in the test env). And we also use Logrocket in the production. BTW. this is a console error in Chrome and Edge, but a warning only in FireFox.

[dominikbugar]

Also I can confirm this in my local dev environment: with Logrocket the issue is present, without Logrocket the issue is gone.

[amgoodman5]

Is there a solution to this yet?

[pierreKineti]

Same problem with Marker.io

[thooyork]

Had the same problem with cdkDrag on draggable tabs with mat-tab-nav-bar. Turned out, that i used cdkDrag directive on an A-tag wich angular or cdk to be technical doesn't seem to like.

Angular version I'm using is 14.2.12 and cdk version is 14.2.7

Heres the old code that throws the error:

<nav mat-tab-nav-bar>
  <div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let link of navLinks">
      <a cdkDrag mat-tab-link *ngIf="link.visible" [routerLink]="link.location" routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{ link.label }}
      </a>
    </ng-container>
  </div>
</nav>

and here I replaced the a tags:

<nav mat-tab-nav-bar>
  <div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let link of navLinks">
      <span cdkDrag mat-tab-link *ngIf="link.visible" [routerLink]="link.location" routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{ link.label }}
      </span>
    </ng-container>
  </div>
</nav>

Now erverything works. Just in case somebody has a similar issue with a-tags.

[thedevtoni]

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

[Talb2005]

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.

// dummy handler to fix issue with zone.js
document.addEventListener("mousemove", () => {}, { passive: false, capture: true });

I've added the above line in my polyfills.ts file.

[mberrezak]

It also started happening to me when using Sentry Replay. Looks like it's the same issue as angular/angular#45020.

The workaround suggested there by @VolodymyrBaydalka seems to work.

// dummy handler to fix issue with zone.js
document.addEventListener("mousemove", () => {}, { passive: false, capture: true });

I've added the above line in my polyfills.ts file.

This had an impact on the drag and drop performance for us. Dragging was slow and laggy until removing the line again.