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

fix(date-time): adding fallback for visibility back for e2e tests
fix(tests): updating tests to wait for datetime
2026-03-13 10:22:08 +08:00 · 2025-12-12 09:19:05 -08:00 · 2025-12-12 08:21:18 -08:00 · 2025-12-12 07:29:30 -08:00 · 2025-12-12 07:10:39 -08:00 · 2025-12-11 19:26:50 +00:00
16 changed files with 210 additions and 210 deletions
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -15,10 +15,10 @@
      },
      "devDependencies": {
        "@axe-core/playwright": "^4.11.0",
-        "@capacitor/core": "^7.0.0",
-        "@capacitor/haptics": "^7.0.0",
-        "@capacitor/keyboard": "^7.0.0",
-        "@capacitor/status-bar": "^7.0.0",
+        "@capacitor/core": "^8.0.0",
+        "@capacitor/haptics": "^8.0.0",
+        "@capacitor/keyboard": "^8.0.0",
+        "@capacitor/status-bar": "^8.0.0",
        "@clack/prompts": "^0.11.0",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
@@ -50,6 +50,9 @@
        "serve": "^14.0.1",
        "stylelint": "^13.13.1",
        "stylelint-order": "^4.1.0"
+      },
+      "engines": {
+        "node": "24.x"
      }
    },
    "custom-rules": {
@@ -626,7 +629,9 @@
      "license": "MIT"
    },
    "node_modules/@capacitor/core": {
-      "version": "7.4.4",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.0.tgz",
+      "integrity": "sha512-250HTVd/W/KdMygoqaedisvNbHbpbQTN2Hy/8ZYGm1nAqE0Fx7sGss4l0nDg33STxEdDhtVRoL2fIaaiukKseA==",
      "dev": true,
      "license": "MIT",
      "peer": true,
@@ -635,27 +640,33 @@
      }
    },
    "node_modules/@capacitor/haptics": {
-      "version": "7.0.2",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-8.0.0.tgz",
+      "integrity": "sha512-DY1IUOjke1T4ITl7mFHQIKCaJJyHYAYRYHG9bVApU7PDOZiMVGMp48Yjzdqjya+wv/AHS5mDabSTUmhJ5uDvBA==",
      "dev": true,
      "license": "MIT",
      "peerDependencies": {
-        "@capacitor/core": ">=7.0.0"
+        "@capacitor/core": ">=8.0.0"
      }
    },
    "node_modules/@capacitor/keyboard": {
-      "version": "7.0.3",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.0.tgz",
+      "integrity": "sha512-ycPW6iQyFwzDK95jihesj5EGiyyGSfbBqNek11iNp9tBOB7zDeYkUA2S/vPpOETt3dhP6pWr7a9gNVGuEfj11g==",
      "dev": true,
      "license": "MIT",
      "peerDependencies": {
-        "@capacitor/core": ">=7.0.0"
+        "@capacitor/core": ">=8.0.0"
      }
    },
    "node_modules/@capacitor/status-bar": {
-      "version": "7.0.3",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.0.tgz",
+      "integrity": "sha512-aIj3bc7z8lfPgOen8HlrBrkfnxpFnh21OCx6jCUx4Mvv+B6eEkUQ49b32DOddgVfr+igRHLX2SYi7duqIsNDXg==",
      "dev": true,
      "license": "MIT",
      "peerDependencies": {
-        "@capacitor/core": ">=7.0.0"
+        "@capacitor/core": ">=8.0.0"
      }
    },
    "node_modules/@clack/core": {
@@ -9823,4 +9834,4 @@
      }
    }
  }
-}
+}
--- a/core/package.json
+++ b/core/package.json
@@ -40,10 +40,10 @@
  },
  "devDependencies": {
    "@axe-core/playwright": "^4.11.0",
-    "@capacitor/core": "^7.0.0",
-    "@capacitor/haptics": "^7.0.0",
-    "@capacitor/keyboard": "^7.0.0",
-    "@capacitor/status-bar": "^7.0.0",
+    "@capacitor/core": "^8.0.0",
+    "@capacitor/haptics": "^8.0.0",
+    "@capacitor/keyboard": "^8.0.0",
+    "@capacitor/status-bar": "^8.0.0",
    "@clack/prompts": "^0.11.0",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
--- a/core/src/components/datetime-button/test/a11y/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/a11y/datetime-button.e2e.ts
@@ -21,6 +21,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
      );

      const datetimeButton = page.locator('ion-datetime-button');
+      await page.locator('.datetime-ready').waitFor();

      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale`));
    });
@@ -40,6 +41,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
      );

      const datetimeButton = page.locator('ion-datetime-button');
+      await page.locator('.datetime-ready').waitFor();

      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-wrap`));
    });
--- a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts
@@ -24,6 +24,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
      await dateButton.click();
      await ionModalDidPresent.next();

+      // Wait for datetime to be ready before taking screenshot
+      await page.locator('ion-datetime.datetime-ready').waitFor();
+
      await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-modal`));
    });

@@ -44,6 +47,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
      await dateButton.click();
      await ionPopoverDidPresent.next();

+      // Wait for datetime to be ready before taking screenshot
+      await page.locator('ion-datetime.datetime-ready').waitFor();
+
      await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-popover`));
    });
  });
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -108,8 +108,8 @@ export class Datetime implements ComponentInterface {
  private inputId = `ion-dt-${datetimeIds++}`;
  private calendarBodyRef?: HTMLElement;
  private popoverRef?: HTMLIonPopoverElement;
-  private intersectionTrackerRef?: HTMLElement;
  private clearFocusVisible?: () => void;
+  private resizeObserver?: ResizeObserver;
  private parsedMinuteValues?: number[];
  private parsedHourValues?: number[];
  private parsedMonthValues?: number[];
@@ -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;
@@ -1077,6 +1078,14 @@ export class Datetime implements ComponentInterface {
      this.clearFocusVisible();
      this.clearFocusVisible = undefined;
    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
+    }
+    if (this.destroyOverlayListeners) {
+      this.destroyOverlayListeners();
+      this.destroyOverlayListeners = undefined;
+    }
  }

  /**
@@ -1102,113 +1111,100 @@ export class Datetime implements ComponentInterface {
  }

  /**
-   * TODO(FW-6931): Remove this fallback upon solving the root cause
-   * Fallback to ensure the datetime becomes ready even if
-   * IntersectionObserver never reports it as intersecting.
+   * Sets up visibility detection for the datetime component.
   *
-   * This is primarily used in environments where the observer
-   * might not fire as expected, such as when running under
-   * synthetic tests that stub IntersectionObserver.
+   * 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)
   */
-  private ensureReadyIfVisible = () => {
-    if (this.el.classList.contains('datetime-ready')) {
-      return;
+  private 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();
+    };
+
+    /**
+     * 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') 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);
+      };
    }

-    const rect = this.el.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
-      return;
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        const isVisible = width > 0 && height > 0;
+        const isReady = el.classList.contains('datetime-ready');
+
+        if (isVisible && !isReady) {
+          markReady();
+        } else if (!isVisible && isReady) {
+          markHidden();
+        }
+      });
+
+      // Use raf to avoid race condition with modal/popover animations
+      raf(() => this.resizeObserver?.observe(el));
+      startVisibilityPolling();
+    } else {
+      // Test environment fallback - mark ready immediately
+      writeTask(() => {
+        el.classList.add('datetime-ready');
+      });
    }
-
-    this.initializeListeners();
-
-    writeTask(() => {
-      this.el.classList.add('datetime-ready');
-    });
-  };
+  }

  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: IntersectionObserverEntry[]) => {
-      const ev = entries[0];
-      if (!ev.isIntersecting) {
-        return;
-      }
-
-      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');
-      });
-    };
-    const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
-
-    /**
-     * Use raf to avoid a race condition between the component loading and
-     * its display animation starting (such as when shown in a modal). This
-     * could cause the datetime to start at a visibility of 0, erroneously
-     * triggering the `hiddenIO` observer below.
-     */
-    raf(() => visibleIO?.observe(intersectionTrackerRef!));
-
-    /**
-     * TODO(FW-6931): Remove this fallback upon solving the root cause
-     * 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 after everything has had a chance to run.
-     */
-    setTimeout(() => {
-      this.ensureReadyIfVisible();
-    }, 100);
-
-    /**
-     * We need to clean up listeners when the datetime is hidden
-     * in a popover/modal so that we can properly scroll containers
-     * back into view if they are re-presented. When the datetime is hidden
-     * the scroll areas have scroll widths/heights of 0px, so any snapping
-     * we did originally has been lost.
-     */
-    const hiddenCallback = (entries: IntersectionObserverEntry[]) => {
-      const ev = entries[0];
-      if (ev.isIntersecting) {
-        return;
-      }
-
-      this.destroyInteractionListeners();
-
-      /**
-       * When datetime is hidden, we need to make sure that
-       * the month/year picker is closed. Otherwise,
-       * it will be open when the datetime re-appears
-       * and the scroll area of the calendar grid will be 0.
-       * As a result, the wrong month will be shown.
-       */
-      this.showMonthAndYear = false;
-
-      writeTask(() => {
-        this.el.classList.remove('datetime-ready');
-      });
-    };
-    const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
-    raf(() => hiddenIO?.observe(intersectionTrackerRef!));
+    this.initializeVisibilityObserver();

    /**
     * Datetime uses Ionic components that emit
@@ -2693,20 +2689,6 @@ export class Datetime implements ComponentInterface {
          }),
        }}
      >
-        {/*
-          WebKit has a quirk where IntersectionObserver callbacks are delayed until after
-          an accelerated animation finishes if the "root" specified in the config is the
-          browser viewport (the default behavior if "root" is not specified). This means
-          that when presenting a datetime in a modal on iOS the calendar body appears
-          blank until the modal animation finishes.
-
-          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.
-        */}
-        <div class="intersection-tracker" ref={(el) => (this.intersectionTrackerRef = el)}></div>
        {this.renderDatetime(mode)}
      </Host>
    );
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -395,40 +395,18 @@ 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.
+ * Verify that datetime becomes ready via ResizeObserver.
+ * This tests that the datetime properly initializes when it has
+ * dimensions, using ResizeObserver to detect visibility.
 */
 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 }, testInfo) => {
+  test.describe(title('datetime: visibility detection'), () => {
+    test('should become ready when rendered with dimensions', async ({ page }, testInfo) => {
      testInfo.annotations.push({
        type: 'issue',
        description: 'https://github.com/ionic-team/ionic-framework/issues/30706',
      });

-      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>
@@ -438,8 +416,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {

      const datetime = page.locator('ion-datetime');

-      // Give the fallback a short amount of time to run
-      await page.waitForTimeout(100);
+      // Wait for the datetime to become ready via ResizeObserver
+      await page.locator('.datetime-ready').waitFor();

      await expect(datetime).toHaveClass(/datetime-ready/);

--- a/core/src/components/datetime/test/custom/datetime.e2e.ts
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -52,6 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  test.describe(title('datetime: custom focus'), () => {
    test('should focus the selected day and then the day after', async ({ page }) => {
      await page.goto(`/src/components/datetime/test/custom`, config);
+      await page.locator('.datetime-ready').last().waitFor();

      const datetime = page.locator('#custom-calendar-days');

--- a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts
+++ b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts
@@ -7,6 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
      await page.goto('/src/components/datetime/test/first-day-of-week', config);

      const datetime = page.locator('ion-datetime');
+      await page.locator('.datetime-ready').waitFor();
      await expect(datetime).toHaveScreenshot(screenshot(`datetime-day-of-week`));
    });
  });
--- a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts
+++ b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts
@@ -10,6 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
      `,
        config
      );
+      await page.locator('.datetime-ready').waitFor();
    });

    test('should render highlights correctly when using an array', async ({ page }) => {
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1031,14 +1031,17 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": "24.x"
      }
    },
    "node_modules/@ionic/eslint-config": {
@@ -7306,9 +7309,9 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "requires": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
@@ -11286,4 +11289,4 @@
      }
    }
  }
-}
+}
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1398,14 +1398,17 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": "24.x"
      }
    },
    "node_modules/@ionic/eslint-config": {
@@ -9092,4 +9095,4 @@
      }
    }
  }
-}
+}
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -10,4 +10,4 @@
      "license": "MIT"
    }
  }
-}
+}
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -238,14 +238,17 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": "24.x"
      }
    },
    "node_modules/@ionic/eslint-config": {
@@ -415,12 +418,12 @@
      }
    },
    "node_modules/@ionic/react": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.11.tgz",
-      "integrity": "sha512-h4j2SVRMgoxZBdr1bluKGrb0xNYEqEDcjHDuHsok669tKH3RnTMfD276zytfhFh3R8gIKWIqxb76NIsW/hfZcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.12.tgz",
+      "integrity": "sha512-gNm5L++aiwkwJrUFKhcHUUgjqnj9n03gK7UcoL7Oz+271arzmwF/FNd47G85b6PovwiYQXY2CUBvNJ7Nh4qE/A==",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "8.7.11",
+        "@ionic/core": "8.7.12",
        "ionicons": "^8.0.13",
        "tslib": "*"
      },
@@ -4175,9 +4178,9 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "requires": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
@@ -4281,11 +4284,11 @@
      "requires": {}
    },
    "@ionic/react": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.11.tgz",
-      "integrity": "sha512-h4j2SVRMgoxZBdr1bluKGrb0xNYEqEDcjHDuHsok669tKH3RnTMfD276zytfhFh3R8gIKWIqxb76NIsW/hfZcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.12.tgz",
+      "integrity": "sha512-gNm5L++aiwkwJrUFKhcHUUgjqnj9n03gK7UcoL7Oz+271arzmwF/FNd47G85b6PovwiYQXY2CUBvNJ7Nh4qE/A==",
      "requires": {
-        "@ionic/core": "8.7.11",
+        "@ionic/core": "8.7.12",
        "ionicons": "^8.0.13",
        "tslib": "*"
      }
@@ -6844,4 +6847,4 @@
      "dev": true
    }
  }
-}
+}
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -736,14 +736,17 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": "24.x"
      }
    },
    "node_modules/@ionic/eslint-config": {
@@ -11913,4 +11916,4 @@
      }
    }
  }
-}
+}
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -673,14 +673,17 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": "24.x"
      }
    },
    "node_modules/@ionic/eslint-config": {
@@ -865,12 +868,12 @@
      }
    },
    "node_modules/@ionic/vue": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.11.tgz",
-      "integrity": "sha512-HDEcjhxWfimVQxvXfghrqlAWpXnJvcUDTIVE2Mvq8ul+s7gL/OZCpXTAODJOfFCBAGJ0o9QXyC7OPjyN4UbO8Q==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.12.tgz",
+      "integrity": "sha512-fH/acQ7dYYd1XY1HFqKf0Th6klbfNNzhlnYUf9kNQpkHqUpMamSzA8TWDOV5f4PNKYq6X4oKAPPeIQA4DOayUQ==",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "8.7.11",
+        "@ionic/core": "8.7.12",
        "@stencil/vue-output-target": "0.10.7",
        "ionicons": "^8.0.13"
      }
@@ -8041,9 +8044,9 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "requires": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
@@ -8156,11 +8159,11 @@
      "requires": {}
    },
    "@ionic/vue": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.11.tgz",
-      "integrity": "sha512-HDEcjhxWfimVQxvXfghrqlAWpXnJvcUDTIVE2Mvq8ul+s7gL/OZCpXTAODJOfFCBAGJ0o9QXyC7OPjyN4UbO8Q==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.12.tgz",
+      "integrity": "sha512-fH/acQ7dYYd1XY1HFqKf0Th6klbfNNzhlnYUf9kNQpkHqUpMamSzA8TWDOV5f4PNKYq6X4oKAPPeIQA4DOayUQ==",
      "requires": {
-        "@ionic/core": "8.7.11",
+        "@ionic/core": "8.7.12",
        "@stencil/vue-output-target": "0.10.7",
        "ionicons": "^8.0.13"
      }
@@ -12991,4 +12994,4 @@
      "dev": true
    }
  }
-}
+}
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -222,14 +222,17 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
-      "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
+      "version": "8.7.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.12.tgz",
+      "integrity": "sha512-+QnytOHsMMDEz45hi/t9AN8ATaWMNZ7jNdx621BGSHi0JkEl1c4NylL3cfYIPJ/78y40ZG5NzprwNiR9sXdswg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": "24.x"
      }
    },
    "node_modules/@ionic/core/node_modules/tslib": {
@@ -4019,4 +4022,4 @@
      "dev": true
    }
  }
-}
+}
Author	SHA1	Message	Date
ShaneK	a8772e8bd9	fix(datetime): moving to overlay listeners for showing instead	2025-12-12 09:19:05 -08:00
ShaneK	12ef9345d6	fix(date-time): adding fallback for visibility back for e2e tests	2025-12-12 08:21:18 -08:00
ShaneK	79d5716baf	fix(tests): updating tests to wait for datetime	2025-12-12 07:29:30 -08:00
ShaneK	14419288c0	fix(datetime): use ResizeObserver to reliably detect visibility changes	2025-12-12 07:10:39 -08:00
renovate[bot]	2ee52d77c8	chore(deps): update capacitor to v8 (major) (#30847 ) This PR contains the following updates: \| Package \| Change \| [Age](https://docs.renovatebot.com/merge-confidence/) \| [Confidence](https://docs.renovatebot.com/merge-confidence/) \| \|---\|---\|---\|---\| \| [@capacitor/core](https://capacitorjs.com) ([source](https://redirect.github.com/ionic-team/capacitor)) \| [`^7.0.0` -> `^8.0.0`](https://renovatebot.com/diffs/npm/@capacitor%2fcore/7.4.4/8.0.0) \| ![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fcore/8.0.0?slim=true) \| ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fcore/7.4.4/8.0.0?slim=true) \| \| [@capacitor/haptics](https://redirect.github.com/ionic-team/capacitor-haptics) \| [`^7.0.0` -> `^8.0.0`](https://renovatebot.com/diffs/npm/@capacitor%2fhaptics/7.0.3/8.0.0) \| ![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fhaptics/8.0.0?slim=true) \| ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fhaptics/7.0.3/8.0.0?slim=true) \| \| [@capacitor/keyboard](https://redirect.github.com/ionic-team/capacitor-keyboard) \| [`^7.0.0` -> `^8.0.0`](https://renovatebot.com/diffs/npm/@capacitor%2fkeyboard/7.0.4/8.0.0) \| ![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fkeyboard/8.0.0?slim=true) \| ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fkeyboard/7.0.4/8.0.0?slim=true) \| \| [@capacitor/status-bar](https://redirect.github.com/ionic-team/capacitor-plugins) \| [`^7.0.0` -> `^8.0.0`](https://renovatebot.com/diffs/npm/@capacitor%2fstatus-bar/7.0.4/8.0.0) \| ![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fstatus-bar/8.0.0?slim=true) \| ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fstatus-bar/7.0.4/8.0.0?slim=true) \| --- ### Release Notes <details> <summary>ionic-team/capacitor (@capacitor/core)</summary> ### [`v8.0.0`](https://redirect.github.com/ionic-team/capacitor/blob/HEAD/CHANGELOG.md#800-2025-12-08) [Compare Source](https://redirect.github.com/ionic-team/capacitor/compare/7.4.4...8.0.0) ##### Bug Fixes - cli: Android apk name multi flavor dimensions parsing ([#7598](https://redirect.github.com/ionic-team/capacitor/issues/7598)) ([2dc20ee](`2dc20ee894`)) - cli: make migrate update to 8.0.0 ([#8250](https://redirect.github.com/ionic-team/capacitor/issues/8250)) ([ee8ba7b](`ee8ba7bbee`)) - ios: move PrivacyInfo.xcprivacy to resource\_bundles to fix build… ([#8264](https://redirect.github.com/ionic-team/capacitor/issues/8264)) ([e6f50b8](`e6f50b8c0c`)) ##### Features - android: Improving SystemBars inset handling ([#8268](https://redirect.github.com/ionic-team/capacitor/issues/8268)) ([81ae30a](`81ae30a503`)) </details> <details> <summary>ionic-team/capacitor-haptics (@capacitor/haptics)</summary> ### [`v8.0.0`](https://redirect.github.com/ionic-team/capacitor-haptics/blob/HEAD/CHANGELOG.md#800-2025-12-08) [Compare Source](`e492876ac8`...v8.0.0) ##### Bug Fixes - android: use 'propName = value' assignment syntax in build.gradle files ([e0d3987](`e0d3987eea`)) ##### feature - Capacitor 8 support ([7d840c7](`7d840c7825`)) ##### BREAKING CHANGES - Capacitor 8 requires major update </details> <details> <summary>ionic-team/capacitor-keyboard (@capacitor/keyboard)</summary> ### [`v8.0.0`](https://redirect.github.com/ionic-team/capacitor-keyboard/blob/HEAD/CHANGELOG.md#800-2025-12-08) [Compare Source](`e492876ac8`...v8.0.0) ##### Bug Fixes - android: Adjust WebView sizing during keyboard size changes ([ae75247](`ae752478ff`)) - android: use 'propName = value' assignment syntax in build.gradle files ([37b39b0](`37b39b0c64`)) ##### feature - Capacitor 8 support ([f8c21ef](`f8c21ef521`)) ##### BREAKING CHANGES - Capacitor 8 requires major update </details> <details> <summary>ionic-team/capacitor-plugins (@capacitor/status-bar)</summary> ### [`v8.0.0`](https://redirect.github.com/ionic-team/capacitor-plugins/releases/tag/%40capacitor/app%408.0.0) [Compare Source](https://redirect.github.com/ionic-team/capacitor-plugins/compare/@capacitor/status-bar@7.0.4...@capacitor/status-bar@8.0.0) Note: Version bump only for package [@capacitor/app](https://redirect.github.com/capacitor/app) </details> --- ### Configuration 📅 Schedule: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied. ♻ Rebasing: Never, or you tick the rebase/retry checkbox. 🔕 Ignore: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4zMi4yIiwidXBkYXRlZEluVmVyIjoiNDIuNDIuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-11 19:26:50 +00:00
renovate[bot]	0e110de5e3	chore(deps): update capacitor to v7.0.3 (#30846 ) This PR contains the following updates: \| Package \| Change \| [Age](https://docs.renovatebot.com/merge-confidence/) \| [Confidence](https://docs.renovatebot.com/merge-confidence/) \| \|---\|---\|---\|---\| \| [@capacitor/haptics](https://redirect.github.com/ionic-team/capacitor-haptics) \| [`7.0.2` -> `7.0.3`](https://renovatebot.com/diffs/npm/@capacitor%2fhaptics/7.0.2/7.0.3) \| ![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fhaptics/7.0.3?slim=true) \| ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fhaptics/7.0.2/7.0.3?slim=true) \| \| [@capacitor/keyboard](https://redirect.github.com/ionic-team/capacitor-keyboard) \| [`7.0.3` -> `7.0.4`](https://renovatebot.com/diffs/npm/@capacitor%2fkeyboard/7.0.3/7.0.4) \| ![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fkeyboard/7.0.4?slim=true) \| ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fkeyboard/7.0.3/7.0.4?slim=true) \| \| [@capacitor/status-bar](https://redirect.github.com/ionic-team/capacitor-plugins) \| [`7.0.3` -> `7.0.4`](https://renovatebot.com/diffs/npm/@capacitor%2fstatus-bar/7.0.3/7.0.4) \| ![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fstatus-bar/7.0.4?slim=true) \| ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fstatus-bar/7.0.3/7.0.4?slim=true) \| --- ### Release Notes <details> <summary>ionic-team/capacitor-haptics (@capacitor/haptics)</summary> ### [`v7.0.3`](https://redirect.github.com/ionic-team/capacitor-haptics/compare/v7.0.2...e492876ac85661078e39664652b01ac9e0ab08c7) [Compare Source](https://redirect.github.com/ionic-team/capacitor-haptics/compare/v7.0.2...e492876ac85661078e39664652b01ac9e0ab08c7) </details> <details> <summary>ionic-team/capacitor-keyboard (@capacitor/keyboard)</summary> ### [`v7.0.4`](https://redirect.github.com/ionic-team/capacitor-keyboard/compare/v7.0.3...e492876ac85661078e39664652b01ac9e0ab08c7) [Compare Source](https://redirect.github.com/ionic-team/capacitor-keyboard/compare/v7.0.3...e492876ac85661078e39664652b01ac9e0ab08c7) </details> <details> <summary>ionic-team/capacitor-plugins (@capacitor/status-bar)</summary> ### [`v7.0.4`](https://redirect.github.com/ionic-team/capacitor-plugins/releases/tag/%40capacitor/splash-screen%407.0.4) [Compare Source](https://redirect.github.com/ionic-team/capacitor-plugins/compare/@capacitor/status-bar@7.0.3...@capacitor/status-bar@7.0.4) Note: Version bump only for package [@capacitor/splash-screen](https://redirect.github.com/capacitor/splash-screen) </details> --- ### Configuration 📅 Schedule: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied. ♻ Rebasing: Never, or you tick the rebase/retry checkbox. 🔕 Ignore: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4zMi4yIiwidXBkYXRlZEluVmVyIjoiNDIuNDIuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-11 18:57:45 +00:00
Shane	f50994a6ef	merge release-8.7.12 (#30856 ) v8.7.12 --------- Co-authored-by: ionitron <hi@ionicframework.com>	2025-12-10 13:52:10 -08:00
ionitron	5bf6f6e825	chore(): update package lock files	2025-12-10 21:34:28 +00:00