prevent click propogation of options

To Reproduce

<!-- method should never be called when clicking an option -->
<div @click="method">

    <!-- this should prevent click propogation of options -->
    <div @click.stop>
        <v-select .../>
    </div>
</div>

Steps to reproduce the behavior:

1. Have a click listener on an item wrapping v-select
2. Wrap v-select with a div and use @click.stop
3. Click the dropdown
4. Click an option

Expected behavior Clicking an option should not trigger the parent click event, since it is a child of the div that has @click.stop. However, a click event is triggered. One is not for the dropdown itself, maybe because it’s not dynamic? In inspector, the dropdown options are contained within the div, but seem to float outside of it.

@mousedown seems to work for my use case, maybe because @mousedown.prevent is used here?

https://github.com/sagalbot/vue-select/blob/6e9861e787d016239df2f73ddf18bea42704db07/src/components/Select.vue#L67

It would be great if there was a way to also prevent clicks from propogating.

[alex-dow]

This has posed an interesting problem.

Say you have a modal with a backdrop, and user can click backdrop to close modal. In that modal, you also have a dropdown menu, whose length exceeds that of the modal.

In previous versions of vue-select, this did not seem to be an issue. But now, since the click event of an option is bubbled upwards, the modal’s backdrop gets the click, and the modal closes.

[LucaColombi]

I dont know if solve the issue, in a similar situation adding @click.stop="" preserve the select function without propagating the click event to outer components