bug: The year / month selected in the year / month picker will be reflected in the calendar with a one-month shift.

[tatsuyasenbom]

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

Current Behavior

Safari on iPhone iOS 15.1

• In Safari on iOS, after the ion-datetime embedded in ion-popover is displayed, the year / month selected in the year / month picker will be reflected in the calendar with a one-month shift.

iphone.mp4

Google Chrome on Android 12 or Windows10

• However, it will be reflected correctly on Google Chrome on Android or Windows.

android.mp4

Expected Behavior

• I want you to improve the behavior of Safari on iOS.

Steps to Reproduce

1. Run the code below to build.

   <ion-label>{{ report_date | date:"yyyy年MM月dd日 (EEE)" }}</ion-label>
   <ion-popover [isOpen]="isPopover" arrow="false" style="--offset-y: -35%;">
     <ng-template>
       <ion-datetime (ionChange)="onChangeDate($event)" showDefaultTitle="true" presentation="date">
         <div slot="title">報告日</div>
       </ion-datetime>
     </ng-template>
   </ion-popover>

2. I did the same operation as the video I uploaded to Current Behavior.

Code Reproduction URL

• add ion-datetime on ion-popover

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.0.1
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.3
   @capacitor/android : not installed
   @capacitor/core    : 3.3.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.13
   OS     : Windows 10

Additional Information

No response

[averyjohnston]

Thanks for the issue. Could you create a starter app that reproduces the problem and post a link to the repo here?

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[tatsuyasenbom]

• I made a sample to reproduce the task using Ionic 6.0.1 x Angular 13.0.4.
  • add ion-datetime on ion-popover
• Below are the builded files. I will attach it just in case.
  • www.zip

[averyjohnston]

Thanks! I'm able to replicate. It looks like the issue is that the datetime is too small, which is causing the intersection observers to fire when they shouldn't. As a workaround, you can set the datetime to a higher width -- it looks like 276px does the trick.

Some other interesting things:

• I could only reproduce on iOS 15.0, 15.1, and 15.2. I could not reproduce on iOS 14.7.
• The bug only happens on iOS mode. MD mode works, even on iOS 15.

[tatsuyasenbom]

Thanks! I'm able to replicate. It looks like the issue is that the datetime is too small, which is causing the intersection observers to fire when they shouldn't. As a workaround, you can set the datetime to a higher width -- it looks like 276px does the trick.

Some other interesting things:

• I could only reproduce on iOS 15.0, 15.1, and 15.2. I could not reproduce on iOS 14.7.
• The bug only happens on iOS mode. MD mode works, even on iOS 15.

Thank you for your answer !

I have avoided this phenomenon by fixing the mode to md once.

I'm looking forward to working properly with ios mode by default !

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/angular@6.0.2-dev.1641931632.6a7e2d1