fix(vue): v-model does not update when other events bubble

CHANGELOG.md

@@ -1,3 +1,9 @@
+## @public-ui/[email protected] (2024-03-11)
+
+#### :bug: Bug Fix
+
+- fix(vue): v-model does not update when other events bubble up [#425](https://github.com/ionic-team/stencil-ds-output-targets/pull/425)
+
 ## @public-ui/[email protected] (2024-03-11)
 
 #### :rocket: Enhancement

packages/vue-output-target/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/stencil-vue-output-target",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Vue output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

packages/vue-output-target/vue-component-lib/utils.ts

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