Added non-passive event listener to a scroll-blocking 'touchstart' event


#1

Hello ionic world !
I have this screenshot here with an issue i just got after upgrading ionic-cli to version 3.4.0 a few minutes ago. Does anyone face this issue yet ? If so, how did you guys deal with it since it freezes the interface and i can not click on anything.

[ ionic info ]

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 6.5.0 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : none
Ionic Framework                 : ionic-angular 3.2.0

System:

Node       : v7.7.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : not installed
ios-sim    : 5.0.13 
npm        : 4.1.2

#2

This is probably an accident, Ionic CLI has no influence on the code of the project at all.

What are you doing to cause this log in the console?


#3

Actually, it happens to be related to a form that i have. Let me put the code to explain it

<ion-content no-padding>
     <ion-list>
          <form [formGroup]="logingForm">
               <ion-item>
                    <ion-label floating>Username / e-mail</ion-label>
                    <ion-input formControlName="user" type="text" [(ngModel)]="_userData.user"></ion-input>
               </ion-item>

               <ion-item>
                    <ion-label floating>Password</ion-label>
                    <ion-input formControlName="pass" type="password" [(ngModel)]="_userData.pass"></ion-input>
               </ion-item>
          </form>
     </ion-list>
     <button ion-button color="default" (click)="loginUser()" round full> Login </button>
     <button ion-button color="default" clear full> Don't have an account, please register ! </button>
</ion-content>

If i remove the entire ion-item tags, it does not throw this warning. But when i have the ion-item tag with the label and input, i got the warning and it does not freeze the UI


#4

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.


#5

Sorry ! I just did :slight_smile:


#6

You’re overpowering the number of conditions on your inputs, and a conflict is arising somewhere. I don’t see why you need ngModel at all, and that’s the first thing I’d remove. Define a submit handler for your form, check input correctness inside the submit handler, and, if that fails, pop appropriate errors.

Also, I don’t understand why the logical candidate for your submit button lies outside the form. That might be a source of conflict also. What I do in my login form is that the login button goes to the submit handler, and, only if all checks on input correctness pass, does the submit handler call loginUser().


#7

Thank you ! Everything works great now !


#8

Dear Aaron, I didn’t understand what exactly you mean.
I have the same problem (7 violation), but I can’t see where I overpower the input condition, simply I’m using ngmodel (because I need to show the value that may be update).

<ion-header hideBackButton>
    <ion-navbar>
        <ion-title>Dati Rapporto</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list radio-group (ionChange)="adjustWichData()" [(ngModel)]="whyVerifica" no-padding>
        <ion-list-header>
            <div style="font-size:130%">
                <b>Verifica a seguito di:</b>
            </div>
        </ion-list-header>
        <ion-item>
            <ion-label>Scadenza validitĂ  verifica</ion-label>
            <ion-radio value="scad"></ion-radio>
        </ion-item>
        <ion-item>
            <ion-label>Riparazione</ion-label>
            <ion-radio value="rip"></ion-radio>
        </ion-item>
        <ion-item>
            <ion-label>Ordine di aggiustamento</ion-label>
            <ion-radio value="agg"></ion-radio>
        </ion-item>
    </ion-list>
    <ion-grid no-padding>
        <ion-row>
            <ion-col col-2></ion-col>
            <ion-col col-8>
                <ion-item>
                    <ion-label stacked>{{ whyData }}</ion-label>
                    <ion-input type="date" [(ngModel)]='whyDate'></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-3>
                <ion-label align='right'>CCIA:</ion-label>
            </ion-col>
            <ion-col col-2>
                <ion-input [ngModel]="ccia" (ngModelChange)="ccia = $event.toLocaleUpperCase()" placeholder="----"</ion-input>
            </ion-col>
            <ion-col col-5>
                <ion-label align='right'>ord. agg. n. </ion-label>
            </ion-col>
            <ion-col col-2>
                <ion-input type="number" placeholder="----" [(ngModel)]='ordAgg'></ion-input>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-1></ion-col>
            <ion-col col-4>
                <ion-item>
                    <ion-label stacked> Rapporto </ion-label>
                    <ion-input type="number" [(ngModel)]='rapNum'></ion-input>
                </ion-item>
            </ion-col>
            <ion-col col-7>
                <ion-item>
                    <ion-label stacked> del </ion-label>
                    <ion-input type="date" [(ngModel)]='rapDate'></ion-input>
                    <!--<ion-datetime displayFormat="D/MM/YYYY" pickerFormat="D MMM YYYY" [(ngModel)]="rapDate" monthShortNames="gen, feb, mar, apr, mag, giu, lug, ago, set, ott, nov, dic"></ion-datetime>-->
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-3>
                <ion-item>
                    <ion-label align='right'> Op. n.</ion-label>
                </ion-item>
            </ion-col>
            <ion-col col-3>
                <ion-item>
                    <ion-input type="number" readonly=true [(ngModel)]='opCod'></ion-input>
                </ion-item>
            </ion-col>
            <ion-col col-6>
                <ion-item>
                    <ion-input type="text" readonly=true [(ngModel)]='opName'></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
    </ion-grid>
    <br>
    <div align='center'>
        <button ion-button large color='secondary' (click)="letsGo()">
            Inizia Rapporto
        </button>
    </div>

</ion-content>

Any help?


#9

I have the same issue and it’s making the complete UI extremely slow. Can anyone please suggest a solution to this issue ?


#10

For what I understand until now this is only a warning about a possible improvement; I don’t have problem of slow gui.
I didn’t find out why the warning… (all my ngmodel have it)


#11

Try to import the changeDetector class in the current class like :

import { ChangeDetectorRef } from "@angular/core";

Then add

this.changeDetectorRef.detectChanges();

in your method where the (ionChange) / (ngModelChange) is handled


#12

Thank you, josny, but I have the same warning in other similar page without change detection, but only ngmodel…