Repository navigation
bug: The ionChange event of ion-input is triggered the second time the page is entered #20061
Description
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
Activity
mhartington commentedon Dec 11, 2019
👋 Hi there! Are you able to provide a small demo repository to debug this? I'm not able to replicate this locally.
C-racker commentedon Dec 12, 2019
https://stackblitz.com/edit/ionic-v4-angular-tabs-2ynupd
hscheuerle commentedon Dec 28, 2019
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 commentedon May 10, 2020
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 commentedon Jun 2, 2020
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 commentedon Jul 14, 2020
We were able to get around this issue by using
(ngModelChange)=""Instead of using(ionChange)=""merxhan commentedon Aug 6, 2020
@mread1208, muchas gracias me ayudo bastante tu aporte.
ulver2812 commentedon Aug 27, 2020
Same issue here, ionChange is triggered the second time the page is entered, any news on the fix?
Jay031 commentedon Apr 14, 2021
Same issue here.. april 2021 and counting...
alfredoalfa commentedon May 14, 2021
I have this issue, ionChange is firing ionInfinite.
manaraph commentedon Aug 5, 2021
I have same issue too. The event is triggered even after I switched from
(ionChange)=""to (ngModelChange)=""aurelios commentedon Sep 16, 2021
problem solved here, thank you
wrzr123 commentedon Feb 18, 2022
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 commentedon Jul 6, 2022
Hello everyone, we have an open RFC that proposes a change to
ionChangethat would help alleviate this issue.Please take a moment to review and let us know your thoughts: #25532
feat(input): ionChange will only emit from user committed changes (#2…
sean-perkins commentedon Sep 12, 2022
This issue has been resolved in this pull request: #25858 and will be available in the next major release (v7) of Ionic.
ionitron-bot commentedon Oct 12, 2022
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.