Ion-toggle's ionChange is triggered on page load (ionic 5)

Ionic Framework
1

Hi there,

I believe ion-toggle’s ionChange is triggered on page load on ionic 5, if the page is opened on a second time. I saw another bug report on ionic 3 which occurred while the form was populated. Likely it’s related.

Steps to reproduce:

  1. Open the page
  2. Click back
  3. Open the page again (bug occurs here).

The code

<ion-list *ngIf="settingsData">
	<ion-item *ngFor="let s of settingsData.getKeys()" detail="false">
		<ion-label>{{s}}</ion-label>
		<ion-toggle [(ngModel)]="settingsData[s]" (ionChange)="settingChanged(s)"></ion-toggle>
	</ion-item>
</ion-list>

public async ngOnInit(){
	this.settingsData = await timer(100).toPromise().then( () => ({ 
		label_1: true,
		label_2: true,
		label_3: true 
	}) );
}

public settingChanged(settingKey: string) {
	console.log("changed: "+settingKey);
}

The environment

$ ionic info

Ionic:

   Ionic CLI                     : 6.11.0 (/home/vagrant/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1000.6
   @angular-devkit/schematics    : 10.0.6
   @angular/cli                  : 10.0.6
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.1.0) : 1.0.0

System:

   NodeJS : v12.18.3 (/home/vagrant/.nvm/versions/node/v12.18.3/bin/node)
   npm    : 6.14.6
   OS     : Linux 4.9
2

I recommend having only one binding on any given property in any given direction. See this post for more detail on why. Also read this thread which touches on similar ground and should cover your exact issue with links to other threads with proposed strategies.

1 Like
3

:ok_hand:

Seeing the topics you have linked and the number of people experiencing this, maybe it would be a good idea to drop a word about it or a working example on the ion toggle page. Of course removing this pitfall would even be better.

Anyway, many thanks for pointing this out!

1 Like
4

Just to be clear, I don’t work for Ionic. I’m just an ordinary user like you. As I’ve said previously, the Ionic docs are open-source. Maybe they would welcome a PR.

1 Like