fix(datetime): moving to overlay listeners for showing instead

Author: ShaneK

core/src/components/datetime/datetime.tsx

@@ -118,6 +118,7 @@ export class Datetime implements ComponentInterface {
 
   private destroyCalendarListener?: () => void;
   private destroyKeyboardMO?: () => void;
+  private destroyOverlayListeners?: () => void;
 
   // TODO(FW-2832): types (DatetimeParts causes some errors that need untangling)
   private minParts?: any;
@@ -1081,6 +1082,10 @@ export class Datetime implements ComponentInterface {
       this.resizeObserver.disconnect();
       this.resizeObserver = undefined;
     }
+    if (this.destroyOverlayListeners) {
+      this.destroyOverlayListeners();
+      this.destroyOverlayListeners = undefined;
+    }
   }
 
   /**
@@ -1105,26 +1110,6 @@ export class Datetime implements ComponentInterface {
     this.initializeKeyboardListeners();
   }
 
-  /**
-   * FW-6931: Fallback check for when ResizeObserver doesn't fire reliably
-   * (e.g., WebKit during modal re-presentation). Called after element is
-   * hidden to catch when it becomes visible again.
-   */
-  private checkVisibilityFallback = () => {
-    const { el } = this;
-    if (el.classList.contains('datetime-ready')) {
-      return;
-    }
-
-    const rect = el.getBoundingClientRect();
-    if (rect.width > 0 && rect.height > 0) {
-      this.initializeListeners();
-      writeTask(() => {
-        el.classList.add('datetime-ready');
-      });
-    }
-  };
-
   componentDidLoad() {
     const { el } = this;
 
@@ -1141,25 +1126,66 @@ export class Datetime implements ComponentInterface {
      * especially when the element is inside a modal or popover.
      */
     const markReady = () => {
+      if (el.classList.contains('datetime-ready')) {
+        return;
+      }
       this.initializeListeners();
       writeTask(() => {
         el.classList.add('datetime-ready');
       });
     };
 
+    /**
+     * FW-6931: Poll for visibility as a fallback for browsers where
+     * ResizeObserver and event listeners don't fire reliably (e.g., WebKit).
+     */
+    const startVisibilityPolling = () => {
+      let pollCount = 0;
+      const pollVisibility = () => {
+        if (el.classList.contains('datetime-ready') || pollCount >= 60) {
+          return;
+        }
+        pollCount++;
+        const rect = el.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+          markReady();
+        } else {
+          raf(pollVisibility);
+        }
+      };
+      raf(pollVisibility);
+    };
+
     const markHidden = () => {
       this.destroyInteractionListeners();
       this.showMonthAndYear = false;
       writeTask(() => {
         el.classList.remove('datetime-ready');
       });
-      /**
-       * Schedule fallback check for browsers where ResizeObserver
-       * doesn't fire reliably on re-presentation (e.g., WebKit).
-       */
-      setTimeout(() => this.checkVisibilityFallback(), 100);
+      // Start polling for when the element becomes visible again
+      startVisibilityPolling();
     };
 
+    /**
+     * FW-6931: If datetime is inside a popover or modal, listen for the
+     * overlay's present/dismiss events. This is more reliable than
+     * ResizeObserver in some browsers (e.g., WebKit) where the observer
+     * doesn't always fire when the overlay opens.
+     */
+    const parentOverlay = el.closest('ion-modal, ion-popover') as HTMLIonModalElement | HTMLIonPopoverElement | null;
+    if (parentOverlay) {
+      const handlePresent = () => markReady();
+      const handleDismiss = () => markHidden();
+
+      parentOverlay.addEventListener('didPresent', handlePresent);
+      parentOverlay.addEventListener('didDismiss', handleDismiss);
+
+      this.destroyOverlayListeners = () => {
+        parentOverlay.removeEventListener('didPresent', handlePresent);
+        parentOverlay.removeEventListener('didDismiss', handleDismiss);
+      };
+    }
+
     if (typeof ResizeObserver !== 'undefined') {
       this.resizeObserver = new ResizeObserver((entries) => {
         const entry = entries[0];
@@ -1180,11 +1206,8 @@ export class Datetime implements ComponentInterface {
        */
       raf(() => this.resizeObserver?.observe(el));
 
-      /**
-       * Fallback for initial presentation in case ResizeObserver
-       * doesn't fire reliably (e.g., WebKit).
-       */
-      setTimeout(() => this.checkVisibilityFallback(), 100);
+      // Start initial visibility polling
+      startVisibilityPolling();
     } else {
       /**
        * Fallback for test environments where ResizeObserver is not available.