bug: The ionChange event of ion-input is triggered the second time the page is entered

[C-racker]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

<ion-input [(ngModel)]="tests" (ionChange)="test($event)"></ion-input>

ngOnInit(
  this.tests = '123';
)

test($event){
 console.log('$event :', $event);
}

This is triggered the second time the page is accessed

Expected behavior:

If the user is not actively typing, no change event needs to be triggered

[mhartington]

👋 Hi there! Are you able to provide a small demo repository to debug this? I'm not able to replicate this locally.

[C-racker]

👋 Hi there! Are you able to provide a small demo repository to debug this? I'm not able to replicate this locally.

https://stackblitz.com/edit/ionic-v4-angular-tabs-2ynupd

[hscheuerle]

In the example, your button's method goToPage pushes the test1 component onto the router history. When you click the ion-back-button, you navigate back in the stack which pops the router history and destroys the component. You are seeing multiple onInit calls because the component is destroying and initializing correctly.

[sithwarrior]

I changed the example, just to answer the question from @hscheuerle .
The Exact same thing happens, if we dont use the goToPage, but routerLink instead, and even if we omit using the init, to set a value, IonChanges still fires on 2nd load of the page.

@mhartington I actually think this might be stencil related? When debugging locally using Ionic 5, and the ionChange on the Ion Toggle component, I see that the @watch seems to be firing before ComponentWillLoad, the 2nd time I visit the page.

According to the docs, this should not be happening?
Watch Decorator When a user updates a property, Watch will fire what ever method it's attached to and pass that method the new value of the prop along with the old value. Watch is useful for validating props or handling side effects. Watch decorator does not fire when a component initially loads.
https://stenciljs.com/docs/reactive-data#watch-decorator

link to new stackblitz

[sithwarrior]

This is still an issue, I just wanted to update that i fixed my problem, by using reactive forms in Angular, instead of the ionChange method, as a work-around.

[mread1208]

We were able to get around this issue by using (ngModelChange)="" Instead of using (ionChange)=""

[merxhan]

@mread1208, muchas gracias me ayudo bastante tu aporte.

[ulver2812]

Same issue here, ionChange is triggered the second time the page is entered, any news on the fix?

[Jay031]

Same issue here, ionChange is triggered the second time the page is entered, any news on the fix?

Same issue here.. april 2021 and counting...

[alfredoalfa]

I have this issue, ionChange is firing ionInfinite.

[manaraph]

I have same issue too. The event is triggered even after I switched from (ionChange)="" to (ngModelChange)=""

[aurelios]

We were able to get around this issue by using (ngModelChange)="" Instead of using (ionChange)=""

problem solved here, thank you

[wrzr123]

Same issue, also using the (ngModelChange) workaround. But as using [(ngModel)] together with (ngModelChange) is a bad practise, I hope this will be fixed at some point. :)

[sean-perkins]

Hello everyone, we have an open RFC that proposes a change to ionChange that would help alleviate this issue.

Please take a moment to review and let us know your thoughts: #25532

[sean-perkins]

This issue has been resolved in this pull request: #25858 and will be available in the next major release (v7) of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.