Skip to content

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

@CSHaze

Description

@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

Activity

sean-perkins

sean-perkins commented on Mar 20, 2022

@sean-perkins
Contributor

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.

changed the title [-]bug: Patch value does not work with ion-dateTime in presentation mode "time"[/-] [+]bug: Setting the value of `ion-datetime` with presentation time, results in multiple ionChange emissions and incorrect display[/+] on Mar 20, 2022
CSHaze

CSHaze commented on Mar 23, 2022

@CSHaze
Author

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

CSHaze

CSHaze commented on Mar 25, 2022

@CSHaze
Author

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

self-assigned this
on Mar 28, 2022
sean-perkins

sean-perkins commented on Mar 28, 2022

@sean-perkins
Contributor

@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

sean-perkins commented on Mar 28, 2022

@sean-perkins
Contributor

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

6.0.14-dev.11648488849.19ac60f4

Thanks!

CSHaze

CSHaze commented on Mar 29, 2022

@CSHaze
Author

Hi @sean-perkins, I am still seeing the issue. It seems to happen anytime the value is patched from an AM time to a PM time and vice versa.

For example 10:06 AM patched to 6:25 PM changes the displayed time to 12:25 AM.
10:06 PM patched to 6:25 AM changes the displayed time to 12:25 PM.

https://stackblitz.com/edit/ionic6-angular13-95scag?file=package.json

sean-perkins

sean-perkins commented on Apr 7, 2022

@sean-perkins
Contributor

@CSHaze thanks for your patience. Can you test with this updated dev build: 6.0.15-dev.11649352526.165b8639?

When using Stackblitz you have to be cautious in that it will install the latest public version, not always the dev build version. In your example previously, it wasn't appearing to use the dev build (but the dev build also had issues, so that worked out).

Where it says "enter package name" in Stackblitz, you can typically do: @ionic/angular@6.0.15-dev.11649352526.165b8639 to set the dev build. Stackblitz appears to have some caching layer built in, as it's not recognizing the latest dev build.

I locally cloned/replicated your Stackblitz and updated the package and confirmed the functionality.

CSHaze

CSHaze commented on Apr 8, 2022

@CSHaze
Author

@sean-perkins, thank you! It is now working. So weird about the stackblitz, I had to clone it locally as well. Adjusting the package.json and using "enter package name" neither worked.

ionitron-bot

ionitron-bot commented on May 15, 2022

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

locked and limited conversation to collaborators on May 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @CSHaze@sean-perkins

      Issue actions

        bug: Setting the value of `ion-datetime` with presentation time, results in multiple ionChange emissions and incorrect display · Issue #24967 · ionic-team/ionic-framework