-
Notifications
You must be signed in to change notification settings - Fork 13.4k
Description
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.To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
Ionic Framework Version
- v4.xv5.xv6.xTo pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
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 commentedon Mar 20, 2022
Thanks for this issue!
After quickly diagnosing, when dynamically changing the value, the
ionChange
is emitting 4 times:06:02:40
2022-03-20T06:57:00-04:00
2022-03-20T00:02:00-04:00
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:
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.[-]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[/+]CSHaze commentedon Mar 23, 2022
@sean-perkins, thank you for fixing this so quickly!
CSHaze commentedon Mar 25, 2022
@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 commentedon Mar 28, 2022
@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 commentedon Mar 28, 2022
Can you test with this dev build and let me know if you experience any issues?
Thanks!
CSHaze commentedon Mar 29, 2022
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 commentedon Apr 7, 2022
@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 commentedon Apr 8, 2022
@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 commentedon May 15, 2022
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.