bug: IonDatetime (month-year) don't display correctly the value when inside an ion-modal

[FranciskoNeves]

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

I'm using a ion-modal component to display a ion-datetime to select a month-year date.
I pass the value to the ion-datetime component and it displays the correct month-year.
After I select the new month-year value, the modal closes, and when I reopen the modal, the ion-datetime it's broken and don't have a selected value.

Screen_Recording_20230113-112728_MyApp.mp4

Expected Behavior

Ion-datetime displays always the value passed as the selected value.

Steps to Reproduce

Open the modal, select on month-year and the click done.
Open again the modal.

PS: When I tested with a blank project on the browser, it only occurs when I'm in inspect mode.

Code Reproduction URL

https://github.com/FranciskoNeves/IonDatetimeIssueReproduction

Ionic Info

Ionic:

Ionic CLI : 6.20.3
Ionic Framework : @ionic/angular 6.4.2
@angular-devkit/build-angular : 15.1.1
@angular-devkit/schematics : 15.1.1
@angular/cli : 15.1.1
@ionic/angular-toolkit : 6.1.0

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 3 other plugins)

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

Android SDK Tools : 26.1.1
NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.1.0
OS : Windows 10

Additional Information

One solution to this was to use the "keepContentMounted" property on ion-modal, but if the value passed to the ion-datetime is changed in another place, the component don't reflect the new value.

[FranciskoNeves]

One workaround is to use the modalController, to get a new modal with the specific month-year, but in this situation the inline-modal (Recomended by Ionic) it's a much cleaner and easier approach.

[sean-perkins]

Hello @FranciskoNeves thanks for reporting this issue!

I think the problem here overlaps with: #26234. I'd like to close this issue and add the additional use case that this problem occurs to that thread.

I'm not able to as consistently reproduce the issue with presentation="month-year", but the wheel picker presentation of date selection has quirks with scrolling/activating the current value when presented in an overlay.

You could try adding [keepContentsMounted]="true" to the modal to improve this behavior in the interim.

Thanks!

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