Open
Description
Prerequisites/Environment
- Ionic version: @ionic/angular 8.5.5
- Angular project - v19.2
- Using ion-datetime inside a popover or modal.
- Not setting min or max on the datetime (by design).
- This issue is consistently observed on desktop browsers (eg. Chrome/Edge).
- Not yet tested on mobile devices.
Description
We are observing significant performance lag (4–6s delay) when opening the ion-datetime component via a popover or modal on pages that contain heavy layout components, such as:
- ion-grid, ion-row, ion-col
- Custom components (lib-*)
- ion-content scrollable layout
The lag is most noticeable when no min or max is set on the datetime — which is intentional in our case.
Steps to Reproduce
- Add ion-datetime inside a popover
- Use it on a page that includes a full ion-grid or ion-modal with custom lib components
- Do not set min or max on the datetime
- Click the trigger button to open the popover
Observed Behavior
- The datetime popover takes a noticeable time (up to 5 seconds) to render
- During this time, the UI appears frozen or unresponsive
- The lag disappears when used on a minimal page without any custom components and only the button and ion-datetime.
Expected Behavior
- ion-datetime should open promptly in a popover regardless of page layout
- Performance should not degrade when used without min/max range
Code sample
`<ion-modal class="ios modal-default dynamic-modal hydrated show-modal" id="ion-overlay-2" no-router="" tabindex="-1" style="z-index: 20002;">
<lib-test-form>
<lib-overlay-header [title]="testForm.title" [style]="isViewOnly ? 'view' : 'edit'">
</lib-overlay-header>
<ion-button id="open-datetime">Pick a Date</ion-button>
<ion-popover trigger="open-datetime" [keepContentsMounted]="true">
<ng-template>
<ion-datetime presentation="date" [showDefaultButtons]="true"> </ion-datetime>
</ng-template>
</ion-popover>
</lib-test-form>
</ion-modal>`