9

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?

user2943799
  • 947
  • 2
  • 13
  • 23
  • Looking at the Documentation for component select. It does not look like there is a way to prevent this behavior. I tried to make a workaround for this using an overlay and I could not get that to work either. I would say not possible at least not easily. Doc Link -> https://quasar-framework.org/components/select.html – Michael Warner Oct 10 '18 at 19:10
  • Yes, that's my interpretation as well. I'm very surprised -- I would think that this would be the normal expected behaviour. – user2943799 Oct 11 '18 at 10:01
  • You can submit a github issue with the project – Michael Warner Oct 11 '18 at 11:00

3 Answers3

2

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" />
tony19
  • 125,647
  • 18
  • 229
  • 307
steve
  • 1,786
  • 1
  • 15
  • 29
  • I don't think this will resolve the issue, but I'll try it. The click event you're modifying in your example is the one on the select element itself -- the problem I'm describing occurs when a user clicks outside of the element. – user2943799 Jan 14 '19 at 08:32
  • @click.stop worked for me for a similar use case – Jack Jan 17 '22 at 14:04
1

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

xji
  • 7,341
  • 4
  • 40
  • 61
1

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>
Dennis de Laat
  • 513
  • 1
  • 5
  • 10