How to access/overwrite internal menu component from QSelect?
s.molinari last edited by s.molinari
Ok. I’ve got it…to a point.
Still, the use case isn’t making sense to me. How can a multi-select autocomplete offer multiple selections and always stay open? Once the user clicks back into the field to enter the next text to filter on, the menu will close, until some text will is entered (after the first selection is made). And from what you are saying, it will cause the page to re-render (which is also something I don’t get, because we have reactivity in Vue ).
It seems to me, the user should be filling and selecting the filter criteria and be given a button to submit, like saying, “Ok. I’m done with my selection. Now re-render (whatever it is needing re-rendering) with the data filtered as requested”.
Again, I’m sure I’m not understanding the whole problem. It’s not just the select and how to use it that’s the problem. It’s the use case you want to use the select in that’s the problem.
chyde90 last edited by chyde90
How can a multi-select autocomplete offer multiple selections and always stay open?
uhmm… I think we are not talking about the same thing
I am talking about a
<q-select>where the attribute
multipleis set. Like https://quasar.dev/vue-components/select#The-model see the right example with the label “Multiple”:
- you click on the QSelect
- a menu opens
- you can select an option
- – the menu stays open –
- you can select more options
The menu only closes when the user removes focus from the QSelect.
— or when I modify the URL query parameters… which Is what I’m preventing
Sure, I could use a button to trigger the update, but that would be very inconvenient for the users.
You said this. Maybe that’s why I’m confused?
I’m trying to use QSelect like the old QAutocomplete.
Let me see if we can possibly use another component…
This might work.
metalsadman last edited by
I was thinking about doing that too, but clicking back into the field or clicking the arrow at the right doesn’t fire the method.
metalsadman last edited by metalsadman
@s-molinari yeah, but there are many ways to solve this, there’s also slots like
after-optionsmaybe adding a button there that will fire a method or whatever. no need to do something with the inner qmenu imo, and if
use-inputis used it will fire most native events.
chyde90 last edited by
Thank you guys so much!
FYI, just found this out from one of the Quasar gods.
You can use @popup-show.native and @popup-hide.native to hook on showing/hiding the list of options.
metalsadman last edited by
@s-molinari should be worth adding this in docs imo.
It will be.
The events “popup-show” and “popup-hide” have now been upgraded to proper Vue events (i.e. no longer will need the .native modifier) and they are added to the API docs. This change will be released in 1.1.3.