Safari & iOS ion-datetime (modal) no highlight on selected date

[travisBradfield]

Describe the bug
When using the new (v6) ion-datetime element on iOS and Safari the calendar pops up correctly but we can't see the blue circle highlighting the selected date. It works as expected in Chrome.

I've added screen shots.

To reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
This is a screenshot taken when viewing the component in Chrome. This is what I expect to see on Chrome & Safari.

Screenshots
This is a screen shot from Safari. I have selected December 16 2021 (can see through the backdrop) but it doesn't show up on the calendar component.

Browser and OS (please complete the following information)

• OS: iOS
• Browser: Safari
• Version: Version 15.2 (17612.3.6.1.6)

Additional context
This is the HTML that I have in my template:

<ion-item lines="none"> <ion-label> Due Date </ion-label> <ion-text slot="end" *ngIf="dateValue">{{ dateValue }}</ion-text> <ion-button fill="clear" slot="end" id="open-modal"> <ion-icon name="calendar-outline"></ion-icon> </ion-button> <ion-modal class="datetime-ion-modal" trigger="open-modal"> <ion-content force-overscroll="false"> <ng-template> <ion-datetime [value]="defaultDateValue" #popoverDatetime presentation="date" show-default-buttons (ionChange)="dateValue = formatDate(popoverDatetime.value)"></ion-datetime> </ng-template> </ion-content> </ion-modal> </ion-item>

[sean-perkins]

@travisBradfield can you please try with the latest release of Ionic? I believe this was fixed with this PR: ionic-team/ionic-framework#24454.

In the future I would recommend opening issues with the implementation on the ionic-framework repository. The ionic-docs repository is more for examples with the hosted documentation.

Thanks!

[jcesarmobile]

Closing since there was no response and it appears to be fixed