install dev build

core/package-lock.json

@@ -27,7 +27,7 @@
         "@stencil/angular-output-target": "^0.8.4",
         "@stencil/react-output-target": "^0.5.3",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "^0.8.7",
+        "@stencil/vue-output-target": "^0.0.1-dev.11711372539.10de27e3",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -633,9 +633,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
-      "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz",
+      "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1793,9 +1793,9 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz",
-      "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==",
+      "version": "0.0.1-dev.11711372539.10de27e3",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11711372539.10de27e3.tgz",
+      "integrity": "sha512-TOF8daeP3pztr7mvKOZc9y+MULV3ZFpEtJMO/oVxy7EOxrOV8ZgbfsDMGE9g1UY8YZAhOZCfPUgiL4NcMqYY/Q==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -10416,9 +10416,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
-      "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz",
+      "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11248,9 +11248,9 @@
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz",
-      "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==",
+      "version": "0.0.1-dev.11711372539.10de27e3",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11711372539.10de27e3.tgz",
+      "integrity": "sha512-TOF8daeP3pztr7mvKOZc9y+MULV3ZFpEtJMO/oVxy7EOxrOV8ZgbfsDMGE9g1UY8YZAhOZCfPUgiL4NcMqYY/Q==",
       "dev": true,
       "requires": {}
     },

core/package.json

@@ -49,7 +49,7 @@
     "@stencil/angular-output-target": "^0.8.4",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "^0.0.1-dev.11711372539.10de27e3",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/src/components/popover/popover.scss

@@ -101,6 +101,8 @@
   display: flex;
 
   flex-direction: column;
+
+  overflow: hidden;
 }
 
 // Nested Popovers

core/src/css/core.scss

@@ -375,27 +375,3 @@ ion-input input::-webkit-date-and-time-value {
   width: 320px;
   min-height: 320px;
 }
-
-/**
- * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
- * should not be scrollable to ensure the inner content does scroll. However, if the popover
- * does not have a child ion-content (or class equivalent) then the .popover-viewport element
- * should remain scrollable.
- */
-.popover-viewport:has(> ion-content),
-.popover-viewport:has(> .ion-content-scroll-host) {
-  overflow: hidden;
-}
-
-/**
- * :has has cross-browser support, but it is still relatively new. As a result,
- * we should fallback to the old behavior for environments that do not support :has.
- * Developers can explicitly enable this behavior by setting overflow: visible
- * on .popover-viewport if they know they are not going to use an ion-content.
- * TODO FW-XXXX Remove this
- */
-@supports not selector(:has(> ion-content)) {
-  .popover-viewport {
-    overflow: hidden;
-  }
-}

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);
+            }
           });
         });
       },