Skip to content

bug: ion-datetime performance lag when used in popover/modal with other layout components (no min/max set) #30398

Open
@manyamohanan2

Description

@manyamohanan2

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

  1. Add ion-datetime inside a popover
  2. Use it on a page that includes a full ion-grid or ion-modal with custom lib components
  3. Do not set min or max on the datetime
  4. 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>`

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions