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