bug: changing value of component in ionChange results in an infinite loop

Bug Report

Ionic version: [x] 4.7.11

Current behavior: When the value of an Ionic input element is changed from OUTSIDE of the element, the element’s onIonChange is triggered, thereby duplicating the change event.

Expected behavior: As with every other React input, the onIonChange should only be triggered when the value was change from the element itself.

Steps to reproduce: See console in included stackblitz.

1. Both the IonInput and regular input are controlled via the same value.
2. When changing it from the IonInput, only the onIonChange is triggered.
3. When changing it from the regular input, the input’s onChange is called AS WELL AS the onIonChange from the IonInput.

Related code: https://stackblitz.com/edit/ionic-v4-11-7-controlled-inputs

Other information: This same bug is happening with other Ionic inputs as well. I haven’t tested all of them, but it is happening with at least IonToggle and IonDateTime.

This is bad because unless each input has its own separate controlled state, doing something like clearing a state object could trigger 10+ onIonChange events, leading to race conditions and other annoyances.

Ionic info:

Ionic:

   Ionic CLI       : 5.4.13 (/Users/evan/.config/yarn/global/node_modules/ionic)
   Ionic Framework : @ionic/react 4.11.7

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v13.1.0 (/usr/local/Cellar/node/13.1.0/bin/node)
   npm    : 6.12.1
   OS     : macOS Catalina

[ebk46]

And as a followup, it seems that other inputs don’t have onIonInput or anything like it that only triggers for inputs via that element. For example, IonDateTime and IonToggle only have onIonChange. What are we supposed to do in those cases?

[masimplo]

ionChange is triggered with every change of the input value, either through user input or programmatically. If you want your handler to be triggered only when the user changes the input, you should use ionInput event instead.