[Violation] Added non-passive event listener to a scroll-blocking


#1

Hi, I’m having this problem with my code.

.ts file

editNote(note){
  
  console.log('oprimio');
    let prompt = this.alertCtrl.create({
      title: 'Edit Note',
      inputs:[{
        name:'title'
      }],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          //handler: data =>{
          
            //let index = this.notes.indexOf(note);

            //if(index > -1){
              //this.notes[index] = data;
            //}
          //}
        }
      ]
    });
    
    prompt.present();
    
  }

.html file

<ion-content [attr.noScroll]="shouldScroll" padding>

  <ion-list>
    <ion-item-sliding *ngFor="let note of notes">
      <ion-item>
        {{note.title}}
      </ion-item>
      
      <ion-item-options>
        <button id="editarNota" ion-button icon-only (tap)="editNote(note)" light>
          <ion-icon name="paper"></ion-icon>
        </button>
        <button ion-button icon-only (click)="deleteNote(note)" danger>
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
    
    </ion-item-sliding>
  </ion-list>
  
</ion-content>

This error appear when I’m trying to click in a item.

[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

What can I do?

Regards.


#2

It’s a warning at this stage. I see it too - there is a link with that warning that points you to some new passive flags you can use with chrome to avoid the issue. I panicked at first but calmed down realizing it was not destructive :stuck_out_tongue:


#3

Hi, thanks for the answer, but the problem is that I need to click in a item to deploy an options menu, when I click not execute the function “editNote(note)” and in the console appear the error

“[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.”

Maybe I have to change something but I don’t know what. :confused:


#4

Correct, I have the same warning. When I click on my v1 project left menu (sliding menu), the violation warning shows up in console. But it works, does it not?

Some links:
-> The reason for this violation is some new updates starting Chrome 51: https://developers.google.com/web/updates/2016/06/passive-event-listeners
-> A potential easy solution (not tried it) https://github.com/zzarcon/default-passive-events


#5

Quick update, simply doing
npm i default-passive-events -S
in my v1 project removed that violation notice. I’ve tested on a desktop so far, need to try on android device to make sure.


#6

Not, in my case it doesn’t work. I’ll try your recomendations. Thanks


#7

(Edited - the OP changed his label from v1 to v2 ionic - this post only applies to v1)

hold on, you might be conflating two issues. What is the exact problem? You are tapping on a menu option and the view is not being loaded and the last message you see is this violation?

I had the same issue. In my case, it was not the violation that was the problem. I updated from ionic 1.2.4 to ionic 1.3.x and that completely broke my beforeEnter, afterEnter etc handlers. Downgrading back to 1.2.4 resolved it.

See https://github.com/ionic-team/ionic/issues/6577


#8

BTW, my comments are for a v1 project. It looks like you are referring to a v2 project (Your original label was for v1). If you are talking about v2, please disregard my ionic version comment.


#9

Apologies. I went to the liberty of updating the label, as that’s definitely Ionic 2+ code.


#10

Indeed - you did the right thing - I did not even see the code, just the label and the violation and I started swinging away on my keyboard :-p


#11

Yes, I’m using the last version of Ionic or is what I think, but yes is how you say above, I’m tapping on a menu option and the view is not being loaded and the last message I see is this violation.


#12

Same issue for me, that’s happend when I use tap event.

  <ion-card *ngFor="let event of events" (tap)="showEvent(event)" tappable>

Blockquote
"dependencies": {
"@angular/common": “4.4.4”,
"@angular/compiler": “4.4.4”,
"@angular/compiler-cli": “4.4.4”,
"@angular/core": “4.4.4”,
"@angular/forms": “4.4.4”,
"@angular/http": “4.4.4”,
"@angular/platform-browser": “4.4.4”,
"@angular/platform-browser-dynamic": “4.4.4”,
"@ionic-native/code-push": “^4.1.0”,
"@ionic-native/core": “^4.1.0”,
"@ionic-native/facebook": “^4.1.0”,
"@ionic-native/in-app-browser": “^4.1.0”,
"@ionic-native/onesignal": “^4.1.0”,
"@ionic-native/splash-screen": “^4.1.0”,
"@ionic-native/status-bar": “^4.1.0”,
"@ionic-native/stripe": “^4.1.0”,
"@ionic/cli-plugin-cordova": “^1.6.2”,
"@ionic/storage": “2.0.1”,
“code-push”: “^2.0.1-beta”,
“cordova-android”: “^6.1.2”,
“cordova-ios”: “^4.4.0”,
“cordova-plugin-code-push”: “^1.9.5-beta”,
“cordova-plugin-compat”: “^1.1.0”,
“cordova-plugin-device”: “^1.1.6”,
“cordova-plugin-dialogs”: “^1.3.3”,
“cordova-plugin-facebook4”: “^1.9.1”,
“cordova-plugin-file”: “^4.3.3”,
“cordova-plugin-file-transfer”: “^1.6.3”,
“cordova-plugin-inappbrowser”: “^1.7.1”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.3”,
“cordova-plugin-stripe”: “^1.5.3”,
“cordova-plugin-zip”: “^3.1.0”,
“ionic-angular”: “^3.8.0”,
“ionicons”: “3.0.0”,
“mute-stream”: “0.0.7”,
“onesignal-cordova-plugin”: “^2.2.0”,
“rxjs”: “5.4.3”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
"@angular/tsc-wrapped": “^4.4.0-RC.0”,
"@ionic/app-scripts": “^3.0.1”,
"@ionic/cli-build-ionic-angular": “0.0.4”,
“ionic”: “3.18.0”,
“typescript”: “~2.3.4”
},