Prevent click propagation outside of Quasar q-select

Question

I'm using Quasar UI elements in a Vue.js project. For some pop-up elements, specifically q-select in this case, clicking outside of the q-select causes it to close. That's fine -- that's the behaviour I want, but the click event also propagates to the HTML element outside the q-select, which can lead to unexpected/unwanted behaviour. I would prefer that clicking outside of the q-select popup only closes the popup, and does not propagate to any other DOM elements. Is this behaviour supported by Quasar/q-select, or do I need to implement this myself?

Answer 1

You can use one of the available Vue Event Modifiers to prevent, stop, or limit how events bubble up.

It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

https://vuejs.org/v2/guide/events.html#Event-Modifiers

In your case, the follow might suit your needs:

<q-select v-on:click.stop="doThis" />

Answer 2

In my case (on a QCheckbox), I had to use @click.native.prevent instead of just @click.prevent. Then I was able to prevent the default click event on the checkbox and sub in my custom function. Also see https://forum.quasar-framework.org/topic/2269/how-to-handle-both-click-on-whole-q-item-as-well-as-button-inside