fix(datetime): harden visibility logic

Author: ShaneK

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts

@@ -176,5 +176,26 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await ionModalDidPresent.next();
       await expect(datetime).toBeVisible();
     });
+    test('should set datetime ready state and keep calendar interactive when reopening modal', async ({ page }) => {
+      const openAndInteract = async () => {
+        await page.click('#date-button');
+        await ionModalDidPresent.next();
+
+        await page.locator('ion-datetime.datetime-ready').waitFor();
+
+        const calendarBody = datetime.locator('.calendar-body');
+        await expect(calendarBody).toBeVisible();
+
+        const firstEnabledDay = datetime.locator('.calendar-day:not([disabled])').first();
+        await firstEnabledDay.click();
+        await page.waitForChanges();
+
+        await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+        await ionModalDidDismiss.next();
+      };
+
+      await openAndInteract();
+      await openAndInteract();
+    });
   });
 });

core/src/components/datetime/datetime.scss

@@ -49,6 +49,23 @@
   width: 100%;
 }
 
+/**
+ * The intersection tracker participates in layout so
+ * IntersectionObserver has a non-zero rect to observe.
+ * A negative margin keeps the effective host height
+ * unchanged so pages embedding ion-datetime (such as
+ * item input demos) do not grow by 1px.
+ */
+:host .intersection-tracker {
+  width: 100%;
+  height: 1px;
+
+  margin-bottom: -1px;
+
+  opacity: 0;
+  pointer-events: none;
+}
+
 :host .calendar-body,
 :host .datetime-year {
   opacity: 0;

core/src/components/datetime/datetime.tsx

@@ -1101,6 +1101,31 @@ export class Datetime implements ComponentInterface {
     this.initializeKeyboardListeners();
   }
 
+  /**
+   * Fallback to ensure the datetime becomes ready even if
+   * IntersectionObserver never reports it as intersecting.
+   *
+   * This is primarily used in environments where the observer
+   * might not fire as expected, such as when running under
+   * synthetic tests that stub IntersectionObserver.
+   */
+  private ensureReadyIfVisible = () => {
+    if (this.el.classList.contains('datetime-ready')) {
+      return;
+    }
+
+    const rect = this.el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      return;
+    }
+
+    this.initializeListeners();
+
+    writeTask(() => {
+      this.el.classList.add('datetime-ready');
+    });
+  };
+
   componentDidLoad() {
     const { el, intersectionTrackerRef } = this;
 
@@ -1141,6 +1166,21 @@ export class Datetime implements ComponentInterface {
      */
     raf(() => visibleIO?.observe(intersectionTrackerRef!));
 
+    /**
+     * Fallback: If IntersectionObserver never reports that the
+     * datetime is visible but the host clearly has layout, ensure
+     * we still initialize listeners and mark the component as ready.
+     *
+     * We schedule this a couple of frames after load so that any
+     * initial layout/animations (such as a parent modal presenting)
+     * have had a chance to run.
+     */
+    raf(() => {
+      raf(() => {
+        this.ensureReadyIfVisible();
+      });
+    });
+
     /**
      * We need to clean up listeners when the datetime is hidden
      * in a popover/modal so that we can properly scroll containers
@@ -2664,9 +2704,9 @@ export class Datetime implements ComponentInterface {
 
           We can work around this by observing .intersection-tracker and using the host
           (ion-datetime) as the "root". This allows the IO callback to fire the moment
-          the datetime is visible. The .intersection-tracker element should not have
-          dimensions or additional styles, and it should not be positioned absolutely
-          otherwise the IO callback may fire at unexpected times.
+          the datetime is visible. The .intersection-tracker element uses a minimal,
+          invisible block size so it participates in layout, and it should not be
+          positioned absolutely otherwise the IO callback may fire at unexpected times.
         */}
         <div class="intersection-tracker" ref={(el) => (this.intersectionTrackerRef = el)}></div>
         {this.renderDatetime(mode)}

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -394,6 +394,60 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   });
 });
 
+/**
+ * Synthetic IntersectionObserver fallback behavior.
+ *
+ * This test stubs IntersectionObserver so that the callback
+ * never reports an intersecting entry. The datetime should
+ * still become ready via its internal fallback logic.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: IO fallback'), () => {
+    test('should become ready even if IntersectionObserver never reports visible', async ({ page }) => {
+      await page.addInitScript(() => {
+        const OriginalIO = window.IntersectionObserver;
+        (window as any).IntersectionObserver = function (callback: any, options: any) {
+          const instance = new OriginalIO(() => {}, options);
+          const originalObserve = instance.observe.bind(instance);
+
+          instance.observe = (target: Element) => {
+            originalObserve(target);
+            callback([
+              {
+                isIntersecting: false,
+                target,
+              } as IntersectionObserverEntry,
+            ]);
+          };
+
+          return instance;
+        } as any;
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime value="2022-05-03"></ion-datetime>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      // Give the fallback a short amount of time to run
+      await page.waitForTimeout(100);
+
+      await expect(datetime).toHaveClass(/datetime-ready/);
+
+      const calendarBody = datetime.locator('.calendar-body');
+      await expect(calendarBody).toBeVisible();
+
+      const firstEnabledDay = datetime.locator('.calendar-day:not([disabled])').first();
+      await firstEnabledDay.click();
+      await page.waitForChanges();
+    });
+  });
+});
+
 /**
  * We are setting RTL on the component
  * instead, so we don't need to test