Repository navigation
bug: IonDatetime (month-year) don't display correctly the value when inside an ion-modal #26604
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.
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.
Activity
FranciskoNeves commentedon Jan 13, 2023
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 commentedon Jan 13, 2023
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 commentedon Feb 12, 2023
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.