@ionic/core 8.7.13-dev.11765558154.1273081d → 8.7.13-dev.11765560568.1a8772e8

package/components/ion-datetime.js

@@ -1080,20 +1080,17 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         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;
-        /**
-         * 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.
-         *
-         * 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.
-         */
         const markReady = () => {
             if (el.classList.contains('datetime-ready')) {
                 return;
@@ -1109,12 +1106,31 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
             writeTask(() => {
                 el.classList.remove('datetime-ready');
             });
+            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.
+         * 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) {
@@ -1129,8 +1145,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         }
         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) {
@@ -1140,22 +1155,19 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
                     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
@@ -1884,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: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "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

@@ -1076,20 +1076,17 @@ const Datetime = class {
         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;
-        /**
-         * 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.
-         *
-         * 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.
-         */
         const markReady = () => {
             if (el.classList.contains('datetime-ready')) {
                 return;
@@ -1105,12 +1102,31 @@ const Datetime = class {
             index.writeTask(() => {
                 el.classList.remove('datetime-ready');
             });
+            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.
+         * 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) {
@@ -1125,8 +1141,7 @@ const Datetime = class {
         }
         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) {
@@ -1136,22 +1151,19 @@ const Datetime = class {
                     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
@@ -1880,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: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "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

@@ -875,20 +875,17 @@ export class Datetime {
         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;
-        /**
-         * 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.
-         *
-         * 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.
-         */
         const markReady = () => {
             if (el.classList.contains('datetime-ready')) {
                 return;
@@ -904,12 +901,31 @@ export class Datetime {
             writeTask(() => {
                 el.classList.remove('datetime-ready');
             });
+            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.
+         * 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) {
@@ -924,8 +940,7 @@ export class Datetime {
         }
         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) {
@@ -935,22 +950,19 @@ export class Datetime {
                     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
@@ -1679,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: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "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-12T16:51:03",
+  "timestamp": "2025-12-12T17:31:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

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

@@ -1074,20 +1074,17 @@ const Datetime = class {
         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;
-        /**
-         * 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.
-         *
-         * 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.
-         */
         const markReady = () => {
             if (el.classList.contains('datetime-ready')) {
                 return;
@@ -1103,12 +1100,31 @@ const Datetime = class {
             writeTask(() => {
                 el.classList.remove('datetime-ready');
             });
+            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.
+         * 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) {
@@ -1123,8 +1139,7 @@ const Datetime = class {
         }
         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) {
@@ -1134,22 +1149,19 @@ const Datetime = class {
                     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
@@ -1878,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: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "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,