ionic-framework: bug: The ionChange event of ion-input is triggered the second time the page is entered
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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 4
- Comments: 16 (3 by maintainers)
Commits related to this issue
- feat(input): ionChange will only emit from user committed changes (#25858) Resolves #20106, #20061 — committed to ionic-team/ionic-framework by sean-perkins 2 years ago
We were able to get around this issue by using
(ngModelChange)=""Instead of using(ionChange)=""Same issue here… april 2021 and counting…
Same issue here, ionChange is triggered the second time the page is entered, any news on the fix?
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-decoratorlink to new stackblitz