bug: ion-datetime month changes when trying to select a date on Android

[vladimirSnapAddy]

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

When trying to select a day in a month on ion-datetime, month changes. This happens only on Android device (version 12) after month change arrow was clicked (see screen-recording attached)

datetime_bug.mp4

.

Expected Behavior

After clicking on a day, I expect that value to be selected without switching the month.

Steps to Reproduce

Shown in video. However, cant be reproduced in a browser.

Code Reproduction URL

https://stackblitz.com/edit/angular-ivy-ay1y6r?file=src/app/app.component.ts

Ionic Info

Ionic:

Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 6.0.8
@angular-devkit/build-angular : 12.2.15
@angular-devkit/schematics : 12.2.15
@angular/cli : 12.2.15
@ionic/angular-toolkit : 5.0.3

Cordova:

Cordova CLI : 10.0.0 ([email protected])
Cordova Platforms : android 9.1.0, browser 6.0.0, electron 2.0.0, ios 6.2.0

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

ios-deploy : 1.11.4
ios-sim : 8.0.2
NodeJS : v14.15.5
npm : 6.14.11
OS : macOS Monterey
Xcode : Xcode 13.3 Build version 13E113

Additional Information

No response

[averyjohnston]

Thanks for the issue. I'm unable to replicate the problem using the provided Stackblitz on my phone running Android 12. What device and browser are you testing on? Are there any other steps needed besides opening the Stackblitz and clicking around on the datetime?

Also, could you try on the latest version of Ionic? We've had similar bugs in the past, so I'd want to be sure this hasn't already been resolved.

[vladimirSnapAddy]

Thank you for your suggestions @amandaesmith3. Here are my details:

Device: Samsung Galaxy A52s
Browser: Chrome

However, I have more info to share. ion-datetime is showing described faulty behaviour only when inside of CVA. If I take ion-datetime outside of that environment and use it directly, this issue cannot be reproduced.
However, when inside of CVA, changing month on calendar using forward arrow doesn't work. It does work when using back arrow (screen recording attached). I cannot find a way to influence this behaviour anyhow. For our project, it would be impossible to change everything to using ion-datetime directly without CVA and reactive form controls.

Screen_Recording_arrow_right.mp4

[averyjohnston]

Could you post a Github repo I can use to verify this behavior?

The month scrolling in ion-datetime is powered by two intersection observers. What you're seeing is symptomatic of them failing to fire (when you click the forward arrow) and firing when they shouldn't (when you select a day and the month jumps ahead). In the past, we've seen this happen only under specific circumstances -- specific browser versions, screen widths, etc. -- so I need a reproduction app in order to debug.

[vladimirSnapAddy]

In our case it was due to specific width. Namely, while trying to set up github repo for reproduction of the issue, I found out that I could not reproduce the issue even when ion-datetime is provided as CVA. So, after further debugging, I realized one line in our scss file caused the bug:

ion-modal {
   --width: 382px;
}

It really doesnt make sense to me, however, that ion-datetime component is displaying this behaviour only on Android device while still displaying the component exactly the same as without setting the width. If you agree, I will close the issue.

[averyjohnston]

Could you still post a Github repo? This will help with both assessing the severity of the issue, and checking the fix down the road.

[vladimirSnapAddy]

I apologize, but I cant reproduce it anymore. I cannot understand why. I wish I could help more, but it seems like the issue is fixed. I will close it.

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