bug: Setting the value of `ion-datetime` with presentation time, results in multiple ionChange emissions and incorrect display

[CSHaze]

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

When patching a form value (connected to ion-dateTime) using an asynchronous action, the hours part of the control changes incorrectly.

Expected Behavior

I would expect the patchValue to change the time control to show the new, correct hour value.

Steps to Reproduce

Add an ion-DateTime control to the html using a "time" presentation.

Create a dynamic form in the component using a formBuilder.

Connect the form to ion-DateTime control.

Use an asynchronous action to trigger a patchValue to the form Value tied to the ion-DateTime control.

Observe that the minutes change to the correct value and the hours do not.

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-pegslx?file=src/app/app.component.ts

Ionic Info

Ionic:

Ionic CLI : 6.12.4 (...\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.11
@angular-devkit/build-angular : 13.2.5
@angular-devkit/schematics : 13.2.5
@angular/cli : 13.2.5
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.4.1
@capacitor/core : 3.4.1

Utility:

cordova-res : not installed
native-run : 1.5.0

System:

NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.4.0
OS : Windows 10

Additional Information

No response

[sean-perkins]

Thanks for this issue!

After quickly diagnosing, when dynamically changing the value, the ionChange is emitting 4 times:

1. 06:02:40
2. 2022-03-20T06:57:00-04:00
3. 2022-03-20T00:02:00-04:00
4. 00:02

This is causing the time to display as "12:02" after clicking the button in your reproduction.

We will capture this as a bug and prioritize.

Edit:

I have confirmed this issue does exist in Core, where Stencil will warn that state props have changed during rendering. Since form control handling is handled on a different tick than when the value is modified, it will visibly display incorrect in Angular.

Edit:

Additionally confirmed that the 4 event emissions are from:

1. Datetime value change
2. Picker Column Hour change
3. Picker Column Minute change
4. Picker Column Am/Pm change

Which occurs when the value is changed on the datetime. The reason for this, is that active parts are modified and that logic calls confirm(), which updates the value. We likely need to skip this behavior if the presentation is time.

[CSHaze]

@sean-perkins, thank you for fixing this so quickly!

[CSHaze]

@sean-perkins I just tested with 6.0.13 and there is still an issue when changing the time to the AM. PM changes seem to work fine now.

For example the current time is 1:30 PM (time control starts at this). I try and patch it to 11:05:00 (11 AM). It does not work, it changes to 12:05 PM.

[sean-perkins]

@CSHaze thanks for testing! I'm seeing the same behavior when the initial value is PM and trying to patch the value to AM. I'll re-open and diagnose further on our end.

[sean-perkins]

Can you test with this dev build and let me know if you experience any issues?

6.0.14-dev.11648488849.19ac60f4

Thanks!