bug: ion-datetime ngModel usage emits ionChange event without value change every time after initial load

[hatsantos]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I'm migrating an app from Ionic 5 to Ionic 6.

When using the ion-datetime component, the first time the component is used it works as aspected, the component does not dispatch the ionChange event when is open, it dispatch the event only after the first selection... but after a value is selected, if a click is done on the component (second time) a ionChange is dispatched without any change or selection.

Expected Behavior

The even should only be dispatched if a change occurs, for example, a different day is selected.

Steps to Reproduce

1 - Add a button/input to invoke the ion-datetime component in a modal with the default buttons on the ion-datetime component;
2 - Setup a ngModel and a ionChange event on the ion-datetime component;
3 - Do not set any value to the ngModel;
4 - Click on the component to invoke the ion-datetime modal;
5 - No ionChange event happens (that seems good);
5 - Selected a value and confirm the selected value;
6 - Value is updated and a ionChange event is dispatched;
7 - Click on the component to invoke the ion-datetime modal;
8 - An ionChange event happens, with out any selection, change other user interaction (new day selected);

And example can be installed from here: https://github.com/hatsantos/Ionic6DateTimeIonChangeBug

I added console logs and a loading screen with a 2 seconds delay when the ionChange is dispatched.

Code Reproduction URL

https://github.com/hatsantos/Ionic6DateTimeIonChangeBug

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\hsantos\AppData\Roaming\nvm\v14.18.2\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.1
@angular-devkit/build-angular : 13.1.2
@angular-devkit/schematics : 13.1.2
@angular/cli : 13.1.2
@ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 3.3.2
@capacitor/android : 3.3.3
@capacitor/core : 3.3.3
@capacitor/ios : 3.3.3

Utility:

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

System:

NodeJS : v14.18.2 (C:\Program Files\nodejs\node.exe)
npm : 6.14.15
OS : Windows 10

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

Hello @hatsantos thanks for reporting this issue!

After further debugging, this issue only appears with ngModel usage of form controls. Updating the example usage with reactive form controls, results in no extra ionChange events.

You can see the different behaviors in this repo: https://github.com/sean-perkins/gh-24452-date-change

There's an open PR that is working towards fixing some intertwined form issues with Angular and Ionic's form controls. In the interim, I would recommend using the reactive form control usage in your application to avoid the unnecessary event emission.

I'll update this bug to reflect the issue with ngModel.

[liamdebeasi]

Hi everyone,

I have a dev build that should resolve this issue: 6.2.10-dev.11665068791.18581fab

Please note that this is a build of Ionic 7 and is subject to the Ionic 7 Breaking Changes.

[liamdebeasi]

Thanks for the issue. This has been resolved via #26083, and a fix will be available in an upcoming release of Ionic Framework. Please note that this fix requires a breaking change, so it is being targeted for the Ionic 7.0 release. Please feel free to continue testing the dev build, and let me know if you have any questions.

[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.