CODEWITHSUNDEEP
javascriptquasar-framework
user2943799
user2943799

Reputation: 1091

Prevent click propagation outside of Quasar q-select

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?

Upvotes: 9

Views: 8390

Answers (3)

Dennis de Laat
Dennis de Laat

Reputation: 533

If you don't want to propagate your q-select (or other Quasar components) click event to other elements, enclose it with a div with the following attributes:

<div @click.stop @keypress.stop>
</div>

Upvotes: 1

steve
steve

Reputation: 1856

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://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

In your case, the follow might suit your needs:

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

Upvotes: 2

xji
xji

Reputation: 8267

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

Upvotes: 1

Related Questions