feat(react): migrate to new React Output Target with Next.js support

fix(alert): do not overwrite id set in htmlAttributes (#29708 )
Issue number: resolves #29704 ---------   ## What is the current behavior? Setting the id of an alert via htmlAttributes doesn't work due to it being overwritten by the overlay id. ## What is the new behavior? Setting the id of an alert via htmlAttributes works. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information First time PR, long time fan. Please let me know if I missed any of the contributing guidelines, happy to change anything!
2026-03-13 10:22:08 +08:00 · 2024-07-16 10:36:36 -07:00 · 2024-07-15 14:51:14 +00:00 · 2024-07-03 16:44:32 +00:00 · 2024-07-03 10:47:21 -04:00 · 2024-07-03 10:33:14 -04:00
21 changed files with 6672 additions and 3415 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,9 +6,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)


-### Features
+### Bug Fixes

-* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158))
+* **dependencies:** use latest @stencil/core to remove DOMException errors ([#29685](https://github.com/ionic-team/ionic-framework/issues/29685)) ([d70ea4](https://github.com/ionic-team/ionic/commit/d70ea400a4713bd091af1393e196e10844a190b6)), closes [#29681](https://github.com/ionic-team/ionic/issues/29681)
+* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158)), closes [#29659](https://github.com/ionic-team/ionic-framework/issues/29659)



--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -48,7 +48,7 @@
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "0.0.1-dev.11721063914.1cb11145",
    "@stencil/sass": "^3.0.9",
    "@stencil/vue-output-target": "^0.8.7",
    "@types/jest": "^29.5.6",
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -341,7 +341,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
  }

  componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
    this.inputsChanged();
    this.buttonsChanged();
  }
--- a/core/src/components/alert/test/alert.spec.tsx
+++ b/core/src/components/alert/test/alert.spec.tsx
@@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';

 import { config } from '../../../global/config';
 import { Alert } from '../alert';
+import { h } from '@stencil/core';

 describe('alert: custom html', () => {
  it('should not allow for custom html by default', async () => {
@@ -38,4 +39,15 @@ describe('alert: custom html', () => {
    expect(content.textContent).toContain('Custom Text');
    expect(content.querySelector('button.custom-html')).toBe(null);
  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Alert],
+      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
+    });
+
+    const alert = page.body.querySelector('ion-alert')!;
+    expect(alert.id).toBe(id);
+  });
 });
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -125,11 +125,8 @@ export const config: Config = {
  ],
  outputTargets: [
    reactOutputTarget({
-      componentCorePackage,
-      includeImportCustomElements: true,
-      includePolyfills: false,
-      includeDefineCustomElements: false,
-      proxiesFile: '../packages/react/src/components/proxies.ts',
+      outDir: '../packages/react/src/components',
+      hydrateModule: '@ionic/core/hydrate',
      excludeComponents: [
        // Routing
        'ion-router',
--- a/package-lock.json
+++ b/package-lock.json
@@ -9288,7 +9288,8 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@octokit/plugin-rest-endpoint-methods": {
      "version": "6.6.2",
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -51,12 +51,10 @@
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/platform-server": "^16.0.0",
-    "@ionic/eslint-config": "^0.3.0",
+    "@ionic/eslint-config": "^0.4.0",
    "@ionic/prettier-config": "^2.0.0",
    "@types/node": "^20.14.9",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint": "^8.57.0",
    "ng-packagr": "^16.0.0",
    "prettier": "^2.4.1",
    "rxjs": "^7.8.0",
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1398,11 +1398,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "dependencies": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -2203,9 +2203,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -9820,11 +9820,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "requires": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -10375,9 +10375,9 @@
      }
    },
    "@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@tootallnate/once": {
      "version": "2.0.0",
@@ -15020,4 +15020,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,11 +238,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "dependencies": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -414,11 +414,11 @@
      }
    },
    "node_modules/@ionic/react": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.4.tgz",
-      "integrity": "sha512-ELhVS+aom97BvlEPC33XIeFe9nwB+Nfp74au4lWpckl1ELqwq3nfzAPco1E7cYGLla5M0Rq/hgzn1NYlBI5Ryw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.5.tgz",
+      "integrity": "sha512-Iy5zM3R2InksH6Fh9AcBlgUGhz3YOV/2TDRvIdhT0wQIsDbCreAcGt8ST5x8YeKQPuChoDhmD2HQG9g7Fc9DhQ==",
      "dependencies": {
-        "@ionic/core": "8.2.4",
+        "@ionic/core": "8.2.5",
        "ionicons": "^7.0.0",
        "tslib": "*"
      },
@@ -667,9 +667,9 @@
      ]
    },
    "node_modules/@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -4057,11 +4057,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "requires": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -4163,11 +4163,11 @@
      "requires": {}
    },
    "@ionic/react": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.4.tgz",
-      "integrity": "sha512-ELhVS+aom97BvlEPC33XIeFe9nwB+Nfp74au4lWpckl1ELqwq3nfzAPco1E7cYGLla5M0Rq/hgzn1NYlBI5Ryw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.5.tgz",
+      "integrity": "sha512-Iy5zM3R2InksH6Fh9AcBlgUGhz3YOV/2TDRvIdhT0wQIsDbCreAcGt8ST5x8YeKQPuChoDhmD2HQG9g7Fc9DhQ==",
      "requires": {
-        "@ionic/core": "8.2.4",
+        "@ionic/core": "8.2.5",
        "ionicons": "^7.0.0",
        "tslib": "*"
      }
@@ -4304,9 +4304,9 @@
      "optional": true
    },
    "@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@types/estree": {
      "version": "1.0.4",
@@ -6666,4 +6666,4 @@
      "dev": true
    }
  }
-}
+}
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -40,6 +40,7 @@
  ],
  "dependencies": {
    "@ionic/core": "^8.2.5",
+    "@stencil/react-output-target": "0.0.1-dev.11721063914.1cb11145",
    "ionicons": "^7.0.0",
    "tslib": "*"
  },
--- a/packages/react/src/components/components.ts
+++ b/packages/react/src/components/components.ts
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -89,7 +89,7 @@ export {
  TransitionOptions,
 } from '@ionic/core/components';

-export * from './proxies';
+export * from './components';
 export * from './routing-proxies';

 // createControllerComponent
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -7,10 +7,10 @@
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
+    "lib": ["dom", "es2020"],
    "importHelpers": true,
-    "module": "es2015",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "node16",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -661,11 +661,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "dependencies": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -852,11 +852,11 @@
      }
    },
    "node_modules/@ionic/vue": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.4.tgz",
-      "integrity": "sha512-0HVaV0temhEsxnaZTx2DibFEGe7QTy7COaL3dquT2/KapPpEcDkKXB/eyYjPbbxDbNmv5jFfmaV7YGJ7Ad2mmg==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.5.tgz",
+      "integrity": "sha512-Is6ZwHlLltR0YF54cgd/Fc/eVTW2VDIOExm3paGkczcaka6Jut3UY9m0ukbILeuRG+phjet31QKKbcGSaooWyg==",
      "dependencies": {
-        "@ionic/core": "8.2.4",
+        "@ionic/core": "8.2.5",
        "ionicons": "^7.0.0"
      }
    },
@@ -1508,9 +1508,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -7878,11 +7878,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "requires": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -7993,11 +7993,11 @@
      "requires": {}
    },
    "@ionic/vue": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.4.tgz",
-      "integrity": "sha512-0HVaV0temhEsxnaZTx2DibFEGe7QTy7COaL3dquT2/KapPpEcDkKXB/eyYjPbbxDbNmv5jFfmaV7YGJ7Ad2mmg==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.5.tgz",
+      "integrity": "sha512-Is6ZwHlLltR0YF54cgd/Fc/eVTW2VDIOExm3paGkczcaka6Jut3UY9m0ukbILeuRG+phjet31QKKbcGSaooWyg==",
      "requires": {
-        "@ionic/core": "8.2.4",
+        "@ionic/core": "8.2.5",
        "ionicons": "^7.0.0"
      }
    },
@@ -8461,9 +8461,9 @@
      }
    },
    "@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@tootallnate/once": {
      "version": "2.0.0",
@@ -12798,4 +12798,4 @@
      "dev": true
    }
  }
-}
+}
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -6,9 +6,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)


-### Features
+### Bug Fixes

-* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158))
+* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158)), closes [#29659](https://github.com/ionic-team/ionic-framework/issues/29659)



--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -208,11 +208,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "dependencies": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -628,9 +628,9 @@
      ]
    },
    "node_modules/@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -3959,11 +3959,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-lCsPzSEVs/XQMF25/phHlwhDNUlz4gqotzY/fEbhq2PT6Z5w81NndRAPsLQ4JM2k4N2gjJNeUFZJi+W78z2qtA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "requires": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      },
@@ -4203,9 +4203,9 @@
      "optional": true
    },
    "@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@types/estree": {
      "version": "1.0.4",
@@ -6551,4 +6551,4 @@
      "dev": true
    }
  }
-}
+}
--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -91,8 +91,17 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
        eventsNames.forEach((eventName: string) => {
          el.addEventListener(eventName.toLowerCase(), (e: Event) => {
-            modelPropValue = (e?.target as any)[modelProp];
-            emit(UPDATE_VALUE_EVENT, modelPropValue);
+            /**
+             * Only update the v-model binding if the event's target is the element we are
+             * listening on. For example, Component A could emit ionChange, but it could also
+             * have a descendant Component B that also emits ionChange. We only want to update
+             * the v-model for Component A when ionChange originates from that element and not
+             * when ionChange bubbles up from Component B.
+             */
+            if (e.target.tagName === el.tagName) {
+              modelPropValue = (e?.target as any)[modelProp];
+              emit(UPDATE_VALUE_EVENT, modelPropValue);
+            }
          });
        });
      },
Author	SHA1	Message	Date
Christian Bromann	703cb82a4b	feat(react): migrate to new React Output Target with Next.js support	2024-07-16 10:36:36 -07:00
Mikel Hamer	1295cedae9	fix(alert): do not overwrite id set in htmlAttributes (#29708 ) Issue number: resolves #29704 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? Setting the id of an alert via htmlAttributes doesn't work due to it being overwritten by the overlay id. ## What is the new behavior? Setting the id of an alert via htmlAttributes works. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information First time PR, long time fan. Please let me know if I missed any of the contributing guidelines, happy to change anything!	2024-07-15 14:51:14 +00:00
jcesarmobile	d30afa5a44	chore(angular-server): update eslint to 8.x (#29671 ) Updated `eslint` to latest 8.x and `@ionic/eslint-config` to latest (0.4.0), which is required for eslint 8.x to work. Removed `eslint-plugin-import` and `@typescript-eslint/eslint-plugin` since they are part of `@ionic/eslint-config`	2024-07-03 16:44:32 +00:00
Brandy Carney	10615bfb30	merge release-8.2.5 (#29687 ) v8.2.5	2024-07-03 10:47:21 -04:00
Brandy Carney	0196d45902	docs(changelog): correct v8.2.5 changelog	2024-07-03 10:33:14 -04:00
Brandy Carney	6a1b193ec4	chore(): update package lock files	2024-07-03 10:08:11 -04:00
ionitron	556a05807c	chore(): update package lock files	2024-07-03 14:06:02 +00:00