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

[josnyS]

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

[Sujan12]

@josnyS

after upgrading ionic-cli to version 3.4.0 a few minutes ago

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?

[josnyS]

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

[Sujan12]

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.

[josnyS]

Sorry ! I just did

[AaronSterling]

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().

[josnyS]

Thank you ! Everything works great now !

[pimol]

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?

[suneetjain]

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

[pimol]

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)

[josnyS]

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

[pimol]

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