bug: Datetime label change should sync with transition

[willmartian]

Bug Report

Ionic version:

[ ] 4.x
[ ] 5.x
[x] 6.x

Current behavior:
When changing months by clicking the next/previous buttons, the component waits for the month change animation to finish before updating the state of the month and year label.

In the attached video, observe how navigating with keyboard updates the month and year label instantly. Compare this to the second half of the video, where the month is changed by click.

datetimeMonthChange.mov

Expected behavior:
I would expect the month and year label to change with the month content, not after.

This is in line with other specs and implementations:

• https://material.io/components/date-pickers#desktop-pickers
• https://vuetifyjs.com/en/components/date-pickers/#usage

Steps to reproduce:

Open a ion-datetime component and navigate by click.

Ionic info:

Ionic:

Ionic CLI : 6.13.1

Utility:

cordova-res : 0.15.3
native-run : not installed

System:

NodeJS : v14.17.1
npm : 6.14.13
OS : macOS Big Sur

Firefox, Desktop

[liamdebeasi]

Thanks for the report. The team does not have plans to change this behavior in Datetime at the moment, so I am going to close this.

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