chore(): sync with master branch

2026-03-13 10:22:08 +08:00 · 2021-02-08 14:13:43 -05:00
parent c72bc5dbd7 8cb2ea6804
commit acf0422ca9
24 changed files with 139 additions and 84 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## [5.5.4](https://github.com/ionic-team/ionic/compare/v5.5.3...v5.5.4) (2021-02-04)
+
+
+### Bug Fixes
+
+* **angular:** update ngAdd schematic ([#22858](https://github.com/ionic-team/ionic/issues/22858)) ([487349f](https://github.com/ionic-team/ionic/commit/487349f02a41344db2478735d27bf79f2a1c99b3))
+* **app:** keyboard no longer hides when using contenteditable ([#22857](https://github.com/ionic-team/ionic/issues/22857)) ([b6b2d34](https://github.com/ionic-team/ionic/commit/b6b2d34fd446feb06cf0143946a014d19231a78e)), closes [#22856](https://github.com/ionic-team/ionic/issues/22856)
+* **ios**: scroll assist no longer prevents first click event from firing ([#22845](https://github.com/ionic-team/ionic/issues/22845)) ([f7d4c21](https://github.com/ionic-team/ionic/commit/f7d4c21b64e27f9b655bc1ab2522d6357dc6010f)), closes [#21871](https://github.com/ionic-team/ionic/issues/21871)
+* **select:** class on component now indicates when select is open ([#22846](https://github.com/ionic-team/ionic/issues/22846)) ([1a5accc](https://github.com/ionic-team/ionic/commit/1a5accc5f707f84063469c0bd3e5e153489f1e5d)), closes [#22801](https://github.com/ionic-team/ionic/issues/22801)
+* **vue:** ionChange events now propagate correctly ([#22872](https://github.com/ionic-team/ionic/issues/22872)) ([ff0f1da](https://github.com/ionic-team/ionic/commit/ff0f1da9f11915b48c4258af7c48c4513785f3fc)), closes [#22870](https://github.com/ionic-team/ionic/issues/22870)
+
+
+
 ## [5.5.3](https://github.com/ionic-team/ionic/compare/v5.5.2...v5.5.3) (2021-01-28)


--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/angular",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular",
-      "version": "5.5.3",
+      "version": "5.5.4",
      "license": "MIT",
      "dependencies": {
        "@ionic/core": "file:../core",
@@ -43,7 +43,7 @@
      }
    },
    "../core": {
-      "version": "5.5.2",
+      "version": "5.5.3",
      "license": "MIT",
      "dependencies": {
        "ionicons": "^5.1.2",
@@ -54,7 +54,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/core": "2.1.2",
        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.5",
+        "@stencil/vue-output-target": "0.3.0",
        "@types/jest": "^26.0.10",
        "@types/node": "^14.6.0",
        "@types/puppeteer": "3.0.1",
@@ -5179,7 +5179,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/core": "2.1.2",
        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.5",
+        "@stencil/vue-output-target": "0.3.0",
        "@types/jest": "^26.0.10",
        "@types/node": "^14.6.0",
        "@types/puppeteer": "3.0.1",
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -42,7 +42,7 @@
    "validate": "npm i && npm run lint && npm run test && npm run build"
  },
  "dependencies": {
-    "@ionic/core": "5.5.3",
+    "@ionic/core": "5.5.4",
    "tslib": "^1.9.3"
  },
  "peerDependencies": {
--- a/angular/src/schematics/add/index.ts
+++ b/angular/src/schematics/add/index.ts
@@ -40,20 +40,23 @@ function addIonicAngularModuleToAppModule(projectSourceRoot: Path): Rule {
 function addIonicStyles(projectName: string, projectSourceRoot: Path): Rule {
  return (host: Tree) => {
    const ionicStyles = [
+      'node_modules/@ionic/angular/css/core.css',
      'node_modules/@ionic/angular/css/normalize.css',
      'node_modules/@ionic/angular/css/structure.css',
      'node_modules/@ionic/angular/css/typography.css',
-      'node_modules/@ionic/angular/css/core.css',
+      'node_modules/@ionic/angular/css/display.css',
      'node_modules/@ionic/angular/css/padding.css',
      'node_modules/@ionic/angular/css/float-elements.css',
      'node_modules/@ionic/angular/css/text-alignment.css',
      'node_modules/@ionic/angular/css/text-transformation.css',
      'node_modules/@ionic/angular/css/flex-utils.css',
      `${projectSourceRoot}/theme/variables.css`
-    ].forEach(entry => {
+    ]
+
+    ionicStyles.forEach(entry => {
      addStyle(host, projectName, entry);
    });
-    return host;
+   return host;
  };
 }

@@ -64,7 +67,8 @@ function addIonicons(projectName: string): Rule {
      input: 'node_modules/ionicons/dist/ionicons/svg',
      output: './svg'
    };
-    addAsset(host, projectName, ioniconsGlob);
+    addAsset(host, projectName, 'build', ioniconsGlob);
+    addAsset(host, projectName, 'test', ioniconsGlob);
    return host;
  };
 }
--- a/angular/src/schematics/utils/config.ts
+++ b/angular/src/schematics/utils/config.ts
@@ -62,10 +62,10 @@ export function addStyle(host: Tree, projectName: string, stylePath: string) {
  writeConfig(host, config);
 }

-export function addAsset(host: Tree, projectName: string, asset: string | {glob: string; input: string; output: string}) {
+export function addAsset(host: Tree, projectName: string, architect: string, asset: string | {glob: string; input: string; output: string}) {
  const config = readConfig(host);
  const appConfig = getAngularAppConfig(config, projectName);
-  appConfig.architect.build.options.assets.push(asset);
+  appConfig.architect[architect].options.assets.push(asset);
  writeConfig(host, config);
 }

--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/core",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "5.5.3",
+      "version": "5.5.4",
      "license": "MIT",
      "dependencies": {
        "ionicons": "^5.1.2",
@@ -17,7 +17,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/core": "2.1.2",
        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.5",
+        "@stencil/vue-output-target": "0.3.0",
        "@types/jest": "^26.0.10",
        "@types/node": "^14.6.0",
        "@types/puppeteer": "3.0.1",
@@ -1657,9 +1657,9 @@
      "dev": true
    },
    "node_modules/@stencil/vue-output-target": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.5.tgz",
-      "integrity": "sha512-EnCZbJDD7y2nTnaFXo4PJrEgP9CNvJARZQrnvz93rMDKCzm+19C9goU4D6A1ysblLVvZSTm3wELKSM1auRUm0Q==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz",
+      "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==",
      "dev": true,
      "peerDependencies": {
        "@stencil/core": ">=1.8.0"
@@ -16390,9 +16390,9 @@
      "dev": true
    },
    "@stencil/vue-output-target": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.5.tgz",
-      "integrity": "sha512-EnCZbJDD7y2nTnaFXo4PJrEgP9CNvJARZQrnvz93rMDKCzm+19C9goU4D6A1ysblLVvZSTm3wELKSM1auRUm0Q==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz",
+      "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==",
      "dev": true
    },
    "@stylelint/postcss-css-in-js": {
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -38,7 +38,7 @@
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/core": "2.1.2",
    "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "0.2.5",
+    "@stencil/vue-output-target": "0.3.0",
    "@types/jest": "^26.0.10",
    "@types/node": "^14.6.0",
    "@types/puppeteer": "3.0.1",
--- a/core/src/themes/test/css-variables/css/dark.css
+++ b/core/src/themes/test/css-variables/css/dark.css
@@ -63,7 +63,7 @@
  --ion-color-light-tint: #383a3e;
 }

-.ios {
+.ios body {
  --ion-background-color: #000000;
  --ion-background-color-rgb: 0,0,0;

@@ -96,7 +96,7 @@
  --ion-toolbar-color: #fff;
 }

-.md {
+.md body {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18,18,18;

@@ -126,4 +126,10 @@
  --ion-color-step-950: #f3f3f3;

  --ion-item-background: #1a1b1e;
-}
+}
+
+ion-modal.ios {
+  --ion-background-color: var(--ion-color-step-100);
+  --ion-toolbar-background: var(--ion-color-step-150);
+  --ion-toolbar-border-color: var(--ion-color-step-250);
+}
--- a/core/src/themes/test/css-variables/css/toolbar.css
+++ b/core/src/themes/test/css-variables/css/toolbar.css
@@ -16,11 +16,11 @@
  --ion-toolbar-color: var(--ion-color-light);
 }

-.md {
+.md body {
  --ion-toolbar-segment-color: rgba(var(--ion-color-light-rgb), .7);
  --ion-toolbar-segment-color-checked: var(--ion-color-light);
 }

-.ios {
+.ios body {
  --ion-toolbar-segment-color-checked: var(--ion-color-primary);
-}
+}
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -921,22 +921,31 @@
      // create component to open
      const element = document.createElement('div');
      element.innerHTML = `
-      <ion-header>
+      <ion-header translucent="true">
        <ion-toolbar>
          <ion-title>Super Modal</ion-title>
        </ion-toolbar>
      </ion-header>
-      <ion-content>
-        <h1>Content of doom</h1>
-        <div>Here's some more content</div>
-        <ion-button class="dismiss">Dismiss Modal</ion-button>
+      <ion-content fullscreen="true">
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">Super Modal</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <div class="ion-padding">
+          <h1>Content of doom</h1>
+          <div>Here's some more content</div>
+          <ion-button class="dismiss">Dismiss Modal</ion-button>
+        </div>
      </ion-content>
      `;


      // present the modal
      const modalElement = Object.assign(document.createElement('ion-modal'), {
-        component: element
+        component: element,
+        swipeToClose: true,
+        presentingElement: document.querySelector('ion-tabs')
      });

      // listen for close event
--- a/core/src/utils/input-shims/hacks/input-blurring.ts
+++ b/core/src/utils/input-shims/hacks/input-blurring.ts
@@ -1,6 +1,6 @@
 import { addEventListener, removeEventListener } from '../../helpers';

-const SKIP_SELECTOR = 'input, textarea, [no-blur]';
+const SKIP_SELECTOR = 'input, textarea, [no-blur], [contenteditable]';

 export const enableInputBlurring = () => {
  let focused = true;
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -91,12 +91,14 @@ export const config: Config = {
        {
          elements: ['ion-checkbox', 'ion-toggle'],
          targetAttr: 'checked',
-          event: 'ionChange'
+          event: 'v-ionChange',
+          externalEvent: 'ionChange'
        },
        {
          elements: ['ion-datetime', 'ion-input', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-textarea'],
          targetAttr: 'value',
-          event: 'ionChange'
+          event: 'v-ionChange',
+          externalEvent: 'ionChange'
        }
      ],
    }),
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/docs",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "Pre-packaged API documentation for the Ionic docs.",
  "main": "core.json",
  "types": "core.d.ts",
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/angular-server",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular-server",
-      "version": "5.5.3",
+      "version": "5.5.4",
      "license": "MIT",
      "devDependencies": {
        "@angular/animations": "8.2.13",
@@ -32,7 +32,7 @@
      }
    },
    "../../core": {
-      "version": "5.5.2",
+      "version": "5.5.3",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -44,7 +44,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/core": "2.1.2",
        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.5",
+        "@stencil/vue-output-target": "0.3.0",
        "@types/jest": "^26.0.10",
        "@types/node": "^14.6.0",
        "@types/puppeteer": "3.0.1",
@@ -5440,7 +5440,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/core": "2.1.2",
        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.5",
+        "@stencil/vue-output-target": "0.3.0",
        "@types/jest": "^26.0.10",
        "@types/node": "^14.6.0",
        "@types/puppeteer": "3.0.1",
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular-server",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "Angular SSR Module for Ionic",
  "keywords": [
    "ionic",
@@ -49,7 +49,7 @@
    "@angular/core": "8.2.13",
    "@angular/platform-browser": "8.2.13",
    "@angular/platform-server": "8.2.13",
-    "@ionic/core": "5.5.3",
+    "@ionic/core": "5.5.4",
    "ng-packagr": "5.7.1",
    "tslint": "^5.12.1",
    "tslint-ionic-rules": "0.0.21",
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/react-router",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "React Router wrapper for @ionic/react",
  "keywords": [
    "ionic",
@@ -39,16 +39,16 @@
    "tslib": "*"
  },
  "peerDependencies": {
-    "@ionic/core": "5.5.3",
-    "@ionic/react": "5.5.3",
+    "@ionic/core": "5.5.4",
+    "@ionic/react": "5.5.4",
    "react": ">=16.8.6",
    "react-dom": ">=16.8.6",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
-    "@ionic/core": "5.5.3",
-    "@ionic/react": "5.5.3",
+    "@ionic/core": "5.5.4",
+    "@ionic/react": "5.5.4",
    "@rollup/plugin-node-resolve": "^8.1.0",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/react",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "React specific wrapper for @ionic/core",
  "keywords": [
    "ionic",
@@ -39,7 +39,7 @@
    "css/"
  ],
  "dependencies": {
-    "@ionic/core": "5.5.3",
+    "@ionic/core": "5.5.4",
    "ionicons": "^5.1.2",
    "tslib": "*"
  },
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/vue-router",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/vue-router",
-      "version": "5.5.3",
+      "version": "5.5.4",
      "license": "MIT",
      "dependencies": {
        "@ionic/core": "file:../../core"
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/vue-router",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "Vue Router integration for @ionic/vue",
  "scripts": {
    "test.spec": "jest",
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/vue",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/vue",
-      "version": "5.5.3",
+      "version": "5.5.4",
      "license": "MIT",
      "dependencies": {
        "@ionic/core": "file:../../core",
@@ -23,7 +23,7 @@
      }
    },
    "../../core": {
-      "version": "5.5.2",
+      "version": "5.5.3",
      "license": "MIT",
      "dependencies": {
        "ionicons": "^5.1.2",
@@ -34,7 +34,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/core": "2.1.2",
        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.5",
+        "@stencil/vue-output-target": "0.3.0",
        "@types/jest": "^26.0.10",
        "@types/node": "^14.6.0",
        "@types/puppeteer": "3.0.1",
@@ -589,7 +589,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/core": "2.1.2",
        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.5",
+        "@stencil/vue-output-target": "0.3.0",
        "@types/jest": "^26.0.10",
        "@types/node": "^14.6.0",
        "@types/puppeteer": "3.0.1",
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/vue",
-  "version": "5.5.3",
+  "version": "5.5.4",
  "description": "Vue specific wrapper for @ionic/core",
  "scripts": {
    "lint": "echo add linter",
@@ -56,7 +56,7 @@
    "vue-router": "^4.0.0-rc.4"
  },
  "dependencies": {
-    "@ionic/core": "5.5.3",
+    "@ionic/core": "5.5.4",
    "ionicons": "^5.1.2"
  },
  "vetur": {
--- a/packages/vue/src/ionic-vue.ts
+++ b/packages/vue/src/ionic-vue.ts
@@ -2,8 +2,17 @@ import { App, Plugin } from 'vue';
 import { IonicConfig, setupConfig } from '@ionic/core';
 import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';

-const ael = (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(eventName.toLowerCase(), cb, opts);
-const rel = (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(eventName.toLowerCase(), cb, opts);
+/**
+ * We need to make sure that the web component fires an event
+ * that will not conflict with the user's @ionChange binding,
+ * otherwise the binding's callback will fire before any
+ * v-model values have been updated.
+ */
+const transformEventName = (eventName: string) => {
+  return eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase();
+}
+const ael = (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(transformEventName(eventName), cb, opts);
+const rel = (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(transformEventName(eventName), cb, opts);

 export const IonicVue: Plugin = {

@@ -17,7 +26,7 @@ export const IonicVue: Plugin = {
      await applyPolyfills();
      await defineCustomElements(window, {
        exclude: ['ion-tabs'],
-        ce: (eventName: string, opts: any) => new CustomEvent(eventName.toLowerCase(), opts),
+        ce: (eventName: string, opts: any) => new CustomEvent(transformEventName(eventName), opts),
        ael,
        rel
      } as any);
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -97,7 +97,8 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-c
 ],
 {
  "modelProp": "checked",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -180,7 +181,8 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -294,7 +296,8 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -445,7 +448,8 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio',
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -457,7 +461,8 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('i
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -481,7 +486,8 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range',
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -551,7 +557,8 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -567,7 +574,8 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-seg
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -579,7 +587,8 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -603,7 +612,8 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-selec
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -695,7 +705,8 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-t
 ],
 {
  "modelProp": "value",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


@@ -722,7 +733,8 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggl
 ],
 {
  "modelProp": "checked",
-  "modelUpdateEvent": "ionChange"
+  "modelUpdateEvent": "v-ionChange",
+  "externalModelUpdateEvent": "ionChange"
 });


--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -17,6 +17,7 @@ interface NavManager<T = any> {
 interface ComponentOptions {
  modelProp?: string;
  modelUpdateEvent?: string;
+  externalModelUpdateEvent?: string;
 }

 const getComponentClasses = (classes: unknown) => {
@@ -40,7 +41,7 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
 * integrations.
 */
 export const defineContainer = <Props>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
-  const { modelProp, modelUpdateEvent } = componentOptions;
+  const { modelProp, modelUpdateEvent, externalModelUpdateEvent } = componentOptions;

  /**
  * Create a Vue component wrapper around a Web Component.
@@ -66,8 +67,7 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
           * native web component, but the v-model will
           * not have been updated yet.
           */
-          emit(modelUpdateEvent, e);
-          e.stopImmediatePropagation();
+          emit(externalModelUpdateEvent, e);
        });
      }
    };
@@ -112,7 +112,7 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
        ref: containerRef,
        class: getElementClasses(containerRef, classes),
        onClick: handleClick,
-        onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
+        onVnodeBeforeMount: (modelUpdateEvent && externalModelUpdateEvent) ? onVnodeBeforeMount : undefined
      };

      if (modelProp) {
@@ -130,7 +130,7 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
  Container.props = [...componentProps, ROUTER_LINK_VALUE];
  if (modelProp) {
    Container.props.push(MODEL_VALUE);
-    Container.emits = [UPDATE_VALUE_EVENT, modelUpdateEvent];
+    Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
  }

  return Container;