bug: IonDateTime sometimes show invisible calander

[pjc2007]

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

v8.x

Current Behavior

I have a IonDateTime component, which I show inside a modal, as per the referenced example, where I have reproduced the issue, of the calendar being invisible, and the buttons not working correctly

I have never had any issues with this until upgrading and converting all to standalone,

Now, sometimes it will open with an invisible calendar. Here is what I see in the referenced example (and what I get in my production app)

Debugging into Ionic code, and using copilot suggestions, inside of ion-datetime.js, the following is not called a second time

componentDidLoad() {
        const { el, intersectionTrackerRef } = this;
        /**
         * If a scrollable element is hidden using `display: none`,
         * it will not have a scroll height meaning we cannot scroll elements
         * into view. As a result, we will need to wait for the datetime to become
         * visible if used inside of a modal or a popover otherwise the scrollable
         * areas will not have the correct values snapped into place.
         */
        const visibleCallback = (entries) => {
            const ev = entries[0];
            if (!ev.isIntersecting) {
                // visibleCallback is always called once and exits here
                return;
            }
            
           // When no issues, this is called again, where we can then call initializeListeners
          // and also add the `datetime-ready` class to make the calendar visible

            this.initializeListeners();
            /**
             * TODO FW-2793: Datetime needs a frame to ensure that it
             * can properly scroll contents into view. As a result
             * we hide the scrollable content until after that frame
             * so users do not see the content quickly shifting. The downside
             * is that the content will pop into view a frame after. Maybe there
             * is a better way to handle this?
             */
            writeTask(() => {
                this.el.classList.add('datetime-ready');
            });

I have tried various workaround, such as adding

ion-datetime .calendar-body,
ion-datetime .datetime-year {
  opacity: 1 !important;
}

but even if we get the calendar visible, the buttons do not work correctly, assumingly as we have not had initializeListeners called.

It seems to be quite random sometimes it works, other times not .

Note, this comment is from copilot, so may not be correct, but it has said...

``
GitHub Copilot

Why datetime-ready never appears:

Causes (any one is enough):

IntersectionObserver never reports visibility: The child

has zero size (no layout yet) so intersection ratio stays 0 (threshold = 0.01) → callback not fired.
Datetime created inside a container that is display:none (e.g. *ngIf false, hidden ion-modal before present()) at componentDidLoad. Observer attaches while hidden; when later shown, some WebViews fail to re-fire for a zero‑area target.
IntersectionObserver not available / polyfilled incorrectly in the WebView → no callback → no class.
Your custom CSS (or parent flex constraints) collapses ion-datetime height to 0 until the class would be added (deadlock).
Modal/popover quickly hides then shows (hidden observer fires first removing class; visible never re-fires).
Quick confirmations: Open DevTools console and run:

If width/height = 0 → root cause #1.

For some reason I lost the test suggested in the history, but it did come back as 0;

So the issue here is that I don't always have the visibleCallback called with ev.isIntersecting set to true, so this causes

• Buttons not working correct
• Calendar to be invisible

I have included a reference to a simple example where the issue can occur

Expected Behavior

For the calendar to show, and buttons to work correct. When I have this issue, the months change when I click the empty calendar area.

Steps to Reproduce

1. Run the referenced example, e.g. npm run serve
2. Seem more likely to happen when running with devtools open, and device emulation enabled...

4. Click the SHOW DATE TIME PICKER button.

5. Click in the actual sate time text to open the date time component which contains the ion-datetime

6. Sometimes as here, there will be no calendar

Code Reproduction URL

https://github.com/pjc2007/date-time-issue

Ionic Info

$ ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.2.1 (C:\Users\Peter\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.7.5
@angular-devkit/build-angular : 20.3.4
@angular-devkit/schematics : 20.3.4
@angular/cli : 20.3.4
@ionic/angular-toolkit : 12.3.0

Capacitor:

Capacitor CLI : 7.4.3
@capacitor/android : not installed
@capacitor/core : 7.4.3
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.17.1 (C:\Program Files\nodejs\node.exe)
npm : 10.9.2
OS : Windows 10

Additional Information

I am actually on Windows 11 (not sure why the above report Windows 10)

In the above sample app, I reproduced running in Chrome, but it also occurred on other Mobile devices. when the issue occurs, it is due to the following not being executed.

Note the height of intersection-tracker is 0 (not sure is relevant, was just mentioned by copilot)

The ion-datetime component has the following attributes.

<ion-datetime _ngcontent-ng-c2850345462="" presentation="time-date" hourcycle="h23" class="ion-color ion-color-date-time-light-mode md datetime-presentation-time-date datetime-size-fixed datetime-grid hydrated"><span _ngcontent-ng-c2850345462="" slot="time-label">Time</span><ion-buttons _ngcontent-ng-c2850345462="" slot="buttons" class="sc-ion-buttons-md-h md sc-ion-buttons-md-s hydrated"><!----><ion-button _ngcontent-ng-c2850345462="" class="ion-color ion-color-primary md button button-clear in-buttons ion-activatable ion-focusable hydrated" color="primary">Cancel</ion-button><ion-button _ngcontent-ng-c2850345462="" class="ion-color ion-color-primary md button button-clear in-buttons ion-activatable ion-focusable hydrated" color="primary">Ok</ion-button></ion-buttons><input type="hidden" class="aux-input" name="ion-dt-1" value="2025-10-05T04:19:33.782Z"></ion-datetime>

i.e. no datetime-ready class.