Modal closes on child component input event

[NoahStahl]

After upgrading to rc12, I see behavior where an input event emitted in a component within a b-modal causes the modal to close. The basic structure is: b-modal contains b-form contains a custom component with a v-model (array of strings in this case). When a method in custom component is called to emit an 'input' event to update the value prop supplied as v-model (removing an item from the array), the modal closes.

No errors are shown in console. My environment is Chrome 72 on Windows 10.

This began with rc12, worked fine in rc11. I've reverted in the meantime. Apologies not supplying repro code, but hoping the description might help clue in to what might be going on. Great work on this library!

[tmorehouse]

Is your custom component Emitting a click event (native)?

[jacobmllr95]

@tmorehouse This seems to be related to #2591.

[tmorehouse]

@jackmu95 Will have to dig in to this a bit more.

[NoahStahl]

The #2591 behavior looks like what I'm seeing. My component does involve a button click that calls a method to emit event:

<b-button
    title="Remove"
    variant="danger"
    size="xs"
    class="float-right"
    v-b-tooltip.topright
    @click="onRemove(id)">

private onRemove(removedId: string) { this.$emit("input", this.value.filter(item => item !== removedId)); // Update parent model }

[tmorehouse]

PR #2608 may fix this issue. It fixes the original issue addresses by #2591, without any breaking changes.

[tmorehouse]

@NoahStahl does your component remove the button that has the click handler, once clicked? If so, then #2608 should address your issue.

You can try the playground with this PR at https://deploy-preview-2608--bootstrap-vue.netlify.com/play

[NoahStahl]

@tmorehouse Awesome, thank you! Yes, the click does cause the clicked button to be removed in my scenario.

[tmorehouse]

OK good, the PR should fix your issue.