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

[sean-perkins]

Hello everyone, we have an open RFC that proposes a change to ionChange that would help alleviate this issue.

Please take a moment to review and let us know your thoughts: #25532

[sean-perkins]

Hello everyone, this issue has been resolved and will be available in the next major release of Ionic (v7).

Any ionChange event emission will be the result of user interaction. We additionally are emitting the corresponding event that triggered the change. For example, if a click event triggered the ionChange, the event detail for that original event will be included in the ionChange custom event.

[ionitron-bot]

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.