Skip to content

Commit

Permalink
fix(vue): v-model does not update when other events bubble up (#425)
Browse files Browse the repository at this point in the history
resolves #424
  • Loading branch information
liamdebeasi authored Mar 26, 2024
1 parent 5049b9d commit d8b4069
Showing 1 changed file with 11 additions and 2 deletions.
13 changes: 11 additions & 2 deletions packages/vue-output-target/vue-component-lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});
});
},
Expand Down

0 comments on commit d8b4069

Please sign in to comment.