@ionic/core 8.7.13-dev.11765552290.11441928 → 8.7.13-dev.11765560568.1a8772e8

package/components/ion-datetime.js

@@ -1071,78 +1071,103 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
         this.initializeKeyboardListeners();
     }
-    componentDidLoad() {
+    /**
+     * Sets up visibility detection for the datetime component.
+     *
+     * Uses multiple strategies to reliably detect when the datetime becomes
+     * visible, which is necessary for proper initialization of scrollable areas:
+     * 1. ResizeObserver - detects dimension changes
+     * 2. Overlay event listeners - for datetime inside modals/popovers
+     * 3. Polling fallback - for browsers where observers are unreliable (WebKit)
+     */
+    initializeVisibilityObserver() {
         const { el } = this;
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
+            }
+            this.initializeListeners();
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+            startVisibilityPolling();
+        };
         /**
-         * 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.
-         *
-         * FW-6931: We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * FW-6931: Poll for visibility as a fallback for browsers where
+         * ResizeObserver doesn't fire reliably (e.g., WebKit).
+         */
+        const startVisibilityPolling = () => {
+            let pollCount = 0;
+            const poll = () => {
+                if (el.classList.contains('datetime-ready') || pollCount++ >= 60) {
+                    return;
+                }
+                const { width, height } = el.getBoundingClientRect();
+                if (width > 0 && height > 0) {
+                    markReady();
+                }
+                else {
+                    raf(poll);
+                }
+            };
+            raf(poll);
+        };
+        /**
+         * FW-6931: Listen for overlay present/dismiss events when datetime
+         * is inside a modal or popover.
          */
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        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];
-                const { width, height } = entry.contentRect;
+                const { width, height } = entries[0].contentRect;
                 const isVisible = width > 0 && height > 0;
                 const isReady = el.classList.contains('datetime-ready');
                 if (isVisible && !isReady) {
-                    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(() => {
-                        el.classList.add('datetime-ready');
-                    });
+                    markReady();
                 }
                 else if (!isVisible && isReady) {
-                    /**
-                     * Clean up listeners when hidden so we can properly
-                     * reinitialize scroll positions on re-presentation.
-                     */
-                    this.destroyInteractionListeners();
-                    /**
-                     * Close month/year picker when hidden, otherwise
-                     * it will be open when re-presented with a 0-height
-                     * scroll area, showing the wrong month.
-                     */
-                    this.showMonthAndYear = false;
-                    writeTask(() => {
-                        el.classList.remove('datetime-ready');
-                    });
+                    markHidden();
                 }
             });
-            /**
-             * Use raf to avoid a race condition between the component loading and
-             * its display animation starting (such as when shown in a modal).
-             */
+            // Use raf to avoid race condition with modal/popover animations
             raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+            startVisibilityPolling();
         }
         else {
-            /**
-             * Fallback for test environments where ResizeObserver is not available.
-             * Just mark as ready without initializing scroll/keyboard listeners
-             * since those also require browser APIs not available in Jest.
-             */
+            // Test environment fallback - mark ready immediately
             writeTask(() => {
                 el.classList.add('datetime-ready');
             });
         }
+    }
+    componentDidLoad() {
+        this.initializeVisibilityObserver();
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1871,7 +1896,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '2fb2938db507a134622a3feac44804f11071c589', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -1067,78 +1067,103 @@ const Datetime = class {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
         this.initializeKeyboardListeners();
     }
-    componentDidLoad() {
+    /**
+     * Sets up visibility detection for the datetime component.
+     *
+     * Uses multiple strategies to reliably detect when the datetime becomes
+     * visible, which is necessary for proper initialization of scrollable areas:
+     * 1. ResizeObserver - detects dimension changes
+     * 2. Overlay event listeners - for datetime inside modals/popovers
+     * 3. Polling fallback - for browsers where observers are unreliable (WebKit)
+     */
+    initializeVisibilityObserver() {
         const { el } = this;
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
+            }
+            this.initializeListeners();
+            index.writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            index.writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+            startVisibilityPolling();
+        };
         /**
-         * 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.
-         *
-         * FW-6931: We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * FW-6931: Poll for visibility as a fallback for browsers where
+         * ResizeObserver doesn't fire reliably (e.g., WebKit).
+         */
+        const startVisibilityPolling = () => {
+            let pollCount = 0;
+            const poll = () => {
+                if (el.classList.contains('datetime-ready') || pollCount++ >= 60) {
+                    return;
+                }
+                const { width, height } = el.getBoundingClientRect();
+                if (width > 0 && height > 0) {
+                    markReady();
+                }
+                else {
+                    helpers.raf(poll);
+                }
+            };
+            helpers.raf(poll);
+        };
+        /**
+         * FW-6931: Listen for overlay present/dismiss events when datetime
+         * is inside a modal or popover.
          */
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        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];
-                const { width, height } = entry.contentRect;
+                const { width, height } = entries[0].contentRect;
                 const isVisible = width > 0 && height > 0;
                 const isReady = el.classList.contains('datetime-ready');
                 if (isVisible && !isReady) {
-                    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?
-                     */
-                    index.writeTask(() => {
-                        el.classList.add('datetime-ready');
-                    });
+                    markReady();
                 }
                 else if (!isVisible && isReady) {
-                    /**
-                     * Clean up listeners when hidden so we can properly
-                     * reinitialize scroll positions on re-presentation.
-                     */
-                    this.destroyInteractionListeners();
-                    /**
-                     * Close month/year picker when hidden, otherwise
-                     * it will be open when re-presented with a 0-height
-                     * scroll area, showing the wrong month.
-                     */
-                    this.showMonthAndYear = false;
-                    index.writeTask(() => {
-                        el.classList.remove('datetime-ready');
-                    });
+                    markHidden();
                 }
             });
-            /**
-             * Use raf to avoid a race condition between the component loading and
-             * its display animation starting (such as when shown in a modal).
-             */
+            // Use raf to avoid race condition with modal/popover animations
             helpers.raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+            startVisibilityPolling();
         }
         else {
-            /**
-             * Fallback for test environments where ResizeObserver is not available.
-             * Just mark as ready without initializing scroll/keyboard listeners
-             * since those also require browser APIs not available in Jest.
-             */
+            // Test environment fallback - mark ready immediately
             index.writeTask(() => {
                 el.classList.add('datetime-ready');
             });
         }
+    }
+    componentDidLoad() {
+        this.initializeVisibilityObserver();
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1867,7 +1892,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (index.h(index.Host, { key: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '2fb2938db507a134622a3feac44804f11071c589', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/collection/components/datetime/datetime.js

@@ -866,78 +866,103 @@ export class Datetime {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
         this.initializeKeyboardListeners();
     }
-    componentDidLoad() {
+    /**
+     * Sets up visibility detection for the datetime component.
+     *
+     * Uses multiple strategies to reliably detect when the datetime becomes
+     * visible, which is necessary for proper initialization of scrollable areas:
+     * 1. ResizeObserver - detects dimension changes
+     * 2. Overlay event listeners - for datetime inside modals/popovers
+     * 3. Polling fallback - for browsers where observers are unreliable (WebKit)
+     */
+    initializeVisibilityObserver() {
         const { el } = this;
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
+            }
+            this.initializeListeners();
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+            startVisibilityPolling();
+        };
         /**
-         * 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.
-         *
-         * FW-6931: We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * FW-6931: Poll for visibility as a fallback for browsers where
+         * ResizeObserver doesn't fire reliably (e.g., WebKit).
+         */
+        const startVisibilityPolling = () => {
+            let pollCount = 0;
+            const poll = () => {
+                if (el.classList.contains('datetime-ready') || pollCount++ >= 60) {
+                    return;
+                }
+                const { width, height } = el.getBoundingClientRect();
+                if (width > 0 && height > 0) {
+                    markReady();
+                }
+                else {
+                    raf(poll);
+                }
+            };
+            raf(poll);
+        };
+        /**
+         * FW-6931: Listen for overlay present/dismiss events when datetime
+         * is inside a modal or popover.
          */
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        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];
-                const { width, height } = entry.contentRect;
+                const { width, height } = entries[0].contentRect;
                 const isVisible = width > 0 && height > 0;
                 const isReady = el.classList.contains('datetime-ready');
                 if (isVisible && !isReady) {
-                    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(() => {
-                        el.classList.add('datetime-ready');
-                    });
+                    markReady();
                 }
                 else if (!isVisible && isReady) {
-                    /**
-                     * Clean up listeners when hidden so we can properly
-                     * reinitialize scroll positions on re-presentation.
-                     */
-                    this.destroyInteractionListeners();
-                    /**
-                     * Close month/year picker when hidden, otherwise
-                     * it will be open when re-presented with a 0-height
-                     * scroll area, showing the wrong month.
-                     */
-                    this.showMonthAndYear = false;
-                    writeTask(() => {
-                        el.classList.remove('datetime-ready');
-                    });
+                    markHidden();
                 }
             });
-            /**
-             * Use raf to avoid a race condition between the component loading and
-             * its display animation starting (such as when shown in a modal).
-             */
+            // Use raf to avoid race condition with modal/popover animations
             raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+            startVisibilityPolling();
         }
         else {
-            /**
-             * Fallback for test environments where ResizeObserver is not available.
-             * Just mark as ready without initializing scroll/keyboard listeners
-             * since those also require browser APIs not available in Jest.
-             */
+            // Test environment fallback - mark ready immediately
             writeTask(() => {
                 el.classList.add('datetime-ready');
             });
         }
+    }
+    componentDidLoad() {
+        this.initializeVisibilityObserver();
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1666,7 +1691,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '2fb2938db507a134622a3feac44804f11071c589', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-12T15:13:24",
+  "timestamp": "2025-12-12T17:31:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

package/dist/esm/ion-datetime_3.entry.js

@@ -1065,78 +1065,103 @@ const Datetime = class {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
         this.initializeKeyboardListeners();
     }
-    componentDidLoad() {
+    /**
+     * Sets up visibility detection for the datetime component.
+     *
+     * Uses multiple strategies to reliably detect when the datetime becomes
+     * visible, which is necessary for proper initialization of scrollable areas:
+     * 1. ResizeObserver - detects dimension changes
+     * 2. Overlay event listeners - for datetime inside modals/popovers
+     * 3. Polling fallback - for browsers where observers are unreliable (WebKit)
+     */
+    initializeVisibilityObserver() {
         const { el } = this;
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
+            }
+            this.initializeListeners();
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+            startVisibilityPolling();
+        };
         /**
-         * 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.
-         *
-         * FW-6931: We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * FW-6931: Poll for visibility as a fallback for browsers where
+         * ResizeObserver doesn't fire reliably (e.g., WebKit).
+         */
+        const startVisibilityPolling = () => {
+            let pollCount = 0;
+            const poll = () => {
+                if (el.classList.contains('datetime-ready') || pollCount++ >= 60) {
+                    return;
+                }
+                const { width, height } = el.getBoundingClientRect();
+                if (width > 0 && height > 0) {
+                    markReady();
+                }
+                else {
+                    raf(poll);
+                }
+            };
+            raf(poll);
+        };
+        /**
+         * FW-6931: Listen for overlay present/dismiss events when datetime
+         * is inside a modal or popover.
          */
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        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];
-                const { width, height } = entry.contentRect;
+                const { width, height } = entries[0].contentRect;
                 const isVisible = width > 0 && height > 0;
                 const isReady = el.classList.contains('datetime-ready');
                 if (isVisible && !isReady) {
-                    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(() => {
-                        el.classList.add('datetime-ready');
-                    });
+                    markReady();
                 }
                 else if (!isVisible && isReady) {
-                    /**
-                     * Clean up listeners when hidden so we can properly
-                     * reinitialize scroll positions on re-presentation.
-                     */
-                    this.destroyInteractionListeners();
-                    /**
-                     * Close month/year picker when hidden, otherwise
-                     * it will be open when re-presented with a 0-height
-                     * scroll area, showing the wrong month.
-                     */
-                    this.showMonthAndYear = false;
-                    writeTask(() => {
-                        el.classList.remove('datetime-ready');
-                    });
+                    markHidden();
                 }
             });
-            /**
-             * Use raf to avoid a race condition between the component loading and
-             * its display animation starting (such as when shown in a modal).
-             */
+            // Use raf to avoid race condition with modal/popover animations
             raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+            startVisibilityPolling();
         }
         else {
-            /**
-             * Fallback for test environments where ResizeObserver is not available.
-             * Just mark as ready without initializing scroll/keyboard listeners
-             * since those also require browser APIs not available in Jest.
-             */
+            // Test environment fallback - mark ready immediately
             writeTask(() => {
                 el.classList.add('datetime-ready');
             });
         }
+    }
+    componentDidLoad() {
+        this.initializeVisibilityObserver();
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1865,7 +1890,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '2fb2938db507a134622a3feac44804f11071c589', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,