feat: `ionChange` event: determine whether it by user interaction

[tricki]

Feature Request

Ionic version:

[x] 4.10

Describe the Feature Request
Add a way to figure out if the checked value of ion-toggle was changed by user interaction or programatically.

Describe Preferred Solution
Add a new property to the event object or the detail property.

Describe Alternatives

1. Add a new event (e.g. ionUserChange) that only fires on user interaction.
2. Add the original event to detail.

All of these solutions could be expanded to other components.

Related Code
Same request: #17123

Additional Context
My use case: I have a dark mode toggle and on ionChange I save the user's preference. Until the user manually sets the toggle I use the OS setting (which I get using window.matchMedia('(prefers-color-scheme: dark)')). When the OS setting changes the toggle should change as well. But this saves the new value and no longer checks the OS preference.

[liamdebeasi]

Looks like there is an open PR for this: #19509

[alex-steinberg]

In Ionic 3, I achieved this by using different handlers for the ionFocus and ionBlur events which would only respond to user interactions (i.e. not using ionChange). Now, these events only fire on tabbing, no longer on click. I will post here when I find a workaround.

[alex-steinberg]

Workaround here.

[jeugregg]

ionFocus was ok in beta version of ionic 4. ionFocus is triggered only by user.
Now in ionic 5, it is only triggered if user change the position by a movement like "drag and drop" on the toggle.

In my case, I have to execute the function only if user touch the toggle:
My workaround is to use (click) instead of (ionFocus):

<ion-toggle color="secondary" slot="end" [(ngModel)]="myElement.enabled" (click)="enableElemFocusEvent($event, myElement)" disabled="{{myElement.inProgress}}"></ion-toggle>

So, if the property myElement.enabled is changed by another event, it didn't trigger enableElemFocusEvent.

I think it is not normal, why change between version ? or I have an old version of something. I still use cordova.

I am with this configuration : ionic info :

Ionic:

   Ionic CLI                     : 6.12.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.0
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 8.0.0
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 7 other plugins)

Utility:

   cordova-res : 0.15.2
   native-run  : 1.2.2

System:

   Android SDK Tools : 26.1.1 (/Users/xxx/Library/Android/sdk/)
   ios-deploy        : 1.8.6
   NodeJS            : v14.15.1 (/usr/local/bin/node)
   npm               : 6.14.8
   OS                : macOS Mojave