bug: ion-datetime not changing class 'calendar-day-active' when clicking a date

[DominikRoth]

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

It happens when I use the ion-datetime in a modal and when showDefaultButtons=true.

In browser and on android phone:

When I select a date, the class 'calendar-day-active' doesn't change to the selected date.
The only thing that happens when I select a date is that the :focus styling applies. (I selected 17. in this example)

EDIT: The behavior for browser and android seems to be normal, it just feels odd to me. Because when I click a date, I expect it to change the active styling and when i press 'Done' i want the value to be written to my variable.

On iOS:

The selected date doesn't change styling at all. Not even the focused styling gets applied.
After i clicked 15. the value is set to my variable, but it is not visible.

Expected Behavior

When I click on a date, I expect it to have the active styling.

Steps to Reproduce

1. Put the code snippet into an Ionic v6 app and build for iOS
2. Run the app on simulator or on physical iOS device
3. Open ion-datetime in modal-mode
4. click on another date than the currently selected one
5. Check if active styling is applied to the selected date

Code Snippet

<ion-button id="open-modal">Open Datetime Modal</ion-button>
<ion-modal trigger="open-modal">
  <ng-template>
    <ion-content>
      <ion-datetime showDefaultButtons="true"></ion-datetime>
    </ion-content>
  </ng-template>
</ion-modal>

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.0
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.1.2
@capacitor/android : 3.2.4
@capacitor/core : 3.2.4
@capacitor/ios : 3.2.4

Utility:

cordova-res : not installed globally
native-run (update available: 1.5.0) : 1.4.0

System:

NodeJS : v14.15.3 (/usr/local/bin/node)
npm : 6.14.9
OS : macOS Catalina

Additional Information

No response

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

[wangzhengjiang]

I am facing same problem on iphone, ios version 15.2

[brinehart]

I can reproduce this issue as well on Edge and Chrome on an intel 2020 Macbook.

It only happens for me when the [showDefaultButtons]="true" attribute is added. I should also mention that I am using ion-datetime inside of of an ion-modal

I am seeing this behavior when using 6.0.1 and also on 6.0.0-dev.1639426191.6f5c168

[DominikRoth]

@Ionitron I added a code snippet for reproduction

[jongbonga]

experienced the same thing with other weird behaviors, reported #24451

[sean-perkins]

Hello everyone! Thanks for reporting this issue, adding additional details and helping isolate the driving factors contributing to the bug.

I have an open PR to address this issue (and other mentioned issue): #24454

Unfortunately I am the one that introduced this bug when fixing another issue (programmatically setting the value wasn't updating the date picker display) 🪦.

I want to write a few more tests later today to validate the previous (expected) behaviors as well as the patched fixes. If all that goes well, I'll post a dev build for everyone to test with. With the holiday cycle, we won't be publishing 6.0.2/6.1.0 until after the New Year.

[sean-perkins]

If anyone that is available would like to also additionally confirm this resolution, I'd appreciate it 👍

npm install @ionic/[email protected]

[brinehart]

@sean-perkins I have tested this locally with ion-datetime inside of an ion-modal and it does not appear to have been fixed. I am still seeing the behavior described above in the bug.

[sean-perkins]

@sean-perkins I have tested this locally with ion-datetime inside of an ion-modal and it does not appear to have been fixed. I am still seeing the behavior described above in the bug.

@brinehart thanks for testing this! Did you happen to install the dependency for both @ionic/core and @ionic/angular (if your project is using Angular)? With dev builds, the framework targets will often just install the latest published release of @ionic/core, which would be 6.0.1 and not the fixes I've included.

Here's a test repository to confirm:

• https://github.com/sean-perkins/gh-24414-datetime-active-day/tree/main (issue is present)
• https://github.com/sean-perkins/gh-24414-datetime-active-day/tree/fix (issue is resolved)

Before	After
Kapture.2021-12-22.at.11.56.52.mp4	Kapture.2021-12-22.at.11.55.15.mp4

[ectan]

FYI. I have tested OK (both android and ios) using:
"@ionic/core": "^6.0.1-dev.1640104484.e62df80",
"@ionic/vue": "^6.0.1-dev.1640104484.e62df80",
"@ionic/vue-router": "^6.0.1-dev.1640104484.e62df80",

[Paul-1986]

@sean-perkins Tried it, but didn't work. npm list:
├── @ionic/[email protected]
├── @ionic/[email protected]

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