Ion-datetime calendar-body doesn't show after update to Cap7

Ionic Framework
1

Hello. My ion-datetime calendar doesn’t render properly. The whole body has opacity: 0

I updated to Capacitor 7. I use ion-datime in an ion-modal where I have :keep-contents-mounted="true" that one works just fine..then I have one that gets triggered with a button, also no problem, and then I have one in a regular ion-modal with breakpoints and other components, see code below, and that one that doesn’t show calendar body. I checked the css and .calendar-body shadow dom class stays on opacity: 0 … why? If I add :keep-contents-mounted="true" it does render but then it messes edge to edge for the modal, and it renders below system buttons. Am I doing something wrong? It did work on Cap6.

Thank you

 <template>
    <ion-modal
        :is-open="openModal"
        :initial-breakpoint="types[calendarType].breakpoints[1]"
        :breakpoints="types[calendarType].breakpoints"
        :show-backdrop="openModal"
        @did-present="initializeCalendar"
        @did-dismiss="onDismiss"
        @ion-breakpoint-did-change="handleBreakpointChange"
    >
        <ion-header>
            <ion-toolbar>
                <ion-title class="text-secondary">{{ types[calendarType].title }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-datetime
                id="datetime"
                ref="dateTimePickerRef"
                v-model="displayDate"
                locale="cs-CZ"
                presentation="date"
                color="secondary"
                :highlighted-dates="highlightedDates"
                :first-day-of-week="1"
                @ion-change="changeDate"
            >
            </ion-datetime>

            <meal-type-picker
                v-if="!isDayDuplicate && !isPremiumMealPlanApply"
                ref="mealTypePickerRef"
                :other-day-meals="chosenDayMeals"
            />
        </ion-content>
        <button-footer :with-debounce="true" @go-back="openModal = false" @confirmed="checkDuplicates" />
    </ion-modal>
</template>

I have this class for it

 ion-datetime {
    margin: auto;
    border-radius: 20px;
}

Removing the class doesn’t change anything.

Screenshot 2025-08-31 at 0.06.47
Screenshot 2025-08-31 at 0.06.47628×1364 235 KB

Screenshot 2025-08-31 at 0.07.24
Screenshot 2025-08-31 at 0.07.24838×910 89.8 KB

Thank you

2

So I did find a workaround, but I would still like to keep this open cause it does feel like a bug. The workaround is to have a wrapper with min-height or height and then v-show / v-if on the ion-datetime and a flag that that u set true on @did-present and false on @did-dismiss then u force it to I guess appear? I was surprised it even worked with v-show but it did.

 <div class="datetime-workaround">
                    <ion-datetime
                        v-show="showDatetime"
                        id="datetime"
                        ref="dateTimePickerRef"
                        v-model="displayDate"
                        locale="cs-CZ"
                        presentation="date"
                        color="secondary"
                        :highlighted-dates="highlightedDates"
                        :first-day-of-week="1"
                        class="fade-in-fast"
                        @ion-change="changeDate"
                    >
                    </ion-datetime>
                </div>