ionic-framework: bug: `ion-datetime` with presentation `time` does not emit ionChange when initial value is not set

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
Nightly

Current Behavior

Changing or attempting to set the time in an ion-datetime component doesn’t fire a change event so it is unusable.

Expected Behavior

After changing or setting a time using the ion-datetime component, it should fire a change event (like it used to do).

Steps to Reproduce

Add an ion-datetime component with the presentation="date-time" or presentation="time" attribute
Choose the ‘Time’ button
Select a time
Note that the time does not update or get set (no change event)

Code Reproduction URL

https://stackblitz.com/edit/angular-1ez814

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.1.7

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : 3.5.1 @capacitor/core : 3.5.1 @capacitor/ios : 3.5.1

Utility:

cordova-res : 0.15.4 native-run (update available: 1.6.0) : 1.5.0

System:

NodeJS : v16.13.0 (/usr/local/bin/node) npm : 8.1.0 OS : macOS Big Sur

Additional Information

Reported by another user in the Ionic Discord server on 28th May 2022, https://discordapp.com/channels/520266681499779082/938816942750449704/979783252413935616

I found the above message when searching Discord for ‘datetime’ to see if anyone else was having these issues. I hadn’t changed any of my own code that uses this component and already hooked into the change event, so was wondering why it no longer worked. I think it became broken with a recent core update.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 21 (5 by maintainers)

Most upvoted comments

@andreaslarssen the resolution for this bug should address #25365. I locally re-created your Stackblitz and tested with the dev-build. When the user clicks “Done”, the alert prompts for the change event.

The decision to have different behaviors for the ionChange emission, is because the usage of showDefaultButtons is aligned with the modal presentation pattern of date time in Material Design’s spec. When interacting with a modal overlay, you would not want the change event to be fired and modifying contents in the background. Luckily, if there is a specific use case that can be demonstrated that needs this behavior; you can implement your own buttons that do whatever behavior you would expect of “Cancel” and “Done”, that is not emitting a change event. Ideally you should not be using showDefaultButtons in datetime UI that isn’t a popover or a modal.

sean-perkins on Jun 3, 2022

You sure it’s not just when the initial value is null/undefined?

You’re right. If I set it to ‘00:00’ first up, it works. Not ideal as I never used to do this, but it’s a temporary solution. Thanks for the heads up!

langy on May 30, 2022

You sure it’s not just when the initial value is null/undefined?

andreaslarssen on May 30, 2022