How to access/overwrite internal menu component from QSelect?
-
I’m trying to use
QSelectlike the oldQAutocompletefrom Quasar v0.17…I need to know if the underlying
QMenuis currently showing or not. The old component had a “@show” and “@hide” event.
QMenudoes, too, but how can I access it fromQSelect?I have come up with a workaround, but it seems like a hack and I don’t like that
https://jsfiddle.net/hocsy10d/2/Is there a better way to access the
QSelector at least its events? The vue-devtools browser plugin shows that the event is being fired, but I don’t know how to tap into it. -
This doesn’t help you? https://quasar.dev/vue-components/select#Example--Basic-autocomplete
Scott
-
@s-molinari not really, the link shows an example where I can acces what’s showing when there is no menu. I basically need the opposite
-
Yes, but it’s an autocomplete example. Does it not work for your use case? If not, what isn’t it doing, which you expect it to do?
Scott
-
@s-molinari Well it’s not that it doesn’t work - I need to access the internal QMenu of the QSelect (which it doesn’t expose). The jsfiddle link should show what I’m trying to do
-
It shows you are trying to find a solution to a problem that I have no idea about. What’s the problem you are trying to solve with the select in general?
Scott
-
@chyde90 your solution is fine, but i dunno what you meant by overwriting? (overriding the qmenu?) if yes then the best way is to use qselect’s slots or scoped slots.
-
But, he also won’t get access to the underlying events using slots/ scoped slots, which is what he is asking for.
And, he’s trying to solve a problem that’s still unknown to us. I want to know what that problem is. If we know the actual problem, maybe there is a better way to go about solving it OR it might be a good suggestion for improvement. At any rate, without knowing the problem being addressed, we can’t deduce either.
Scott
-
The problem I’m trying to solve:
I’m using a QSelect as a filter for a table and I want the filter to be part of the URL query parameters. But when I modify the route, the page reloads which causes popovers to close. So I need to detect when the user is done selecting (by knowing if the menu is open or not).And I could accomplish this if I could do something like this:
<q-select ...> <template v-slot:menu"> <!-- this slot does not exist --> <q-menu @show="onShow" @close="onClose"> ... <q-menu> </template> </q-select> -
So, it’s a single selection you are looking for in an autocomplete select field and you just want to trigger on a change of that selection to re-query for new data on the server? How about watching the v-model to make your API calls?
https://codepen.io/smolinari/pen/wvwpvYX?editors=1010
Notice the notification only fires on changes. It may be too simple.
I’m also not sure this solution will help with “when I modify the route”. That sounds like another completely different problem and it means your not totally explaining your whole problem either.
Scott
-
@s-molinari for a single-selection that would do it, but I’m actually talking about multiple selection.
Let me re-phrase the base problem:
- I use a QSelect in multi-selection mode as a filter for a table
- The selected options should be reflected in the URL (as query parameters)
- I want the user to be able to select multiple options without having to re-open the QSelect
- Therefore I cannot modify the route while the menu is open
- So I want to do the URL modification as soon as the menu is closed
And that is why I would like to overwrite the internal QMenu that the QSelect is using, because it exposes the showing state.
OR at least properly hook in to the internal QMenu (like in my JSfiddle example, but in a “non-hacky” way)
As a bonus, if I could overwrite it like in the code snipped above, I could implement a more complex menu with nested options, settings and whatnot.
But the main thing is that I need to know when the menu is currently open. -
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.
Scott
-
@s-molinari said in How to access/overwrite internal menu component from QSelect?:
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 attributemultipleis 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…
Scott
-
-
-
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.
Scott
-
@s-molinari yeah, but there are many ways to solve this, there’s also slots like
before-optionsandafter-optionsmaybe adding a button there that will fire a method or whatever. no need to do something with the inner qmenu imo, and ifuse-inputis used it will fire most native events. -
YES!!
@blurTHAT’S IT!
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.
https://codepen.io/smolinari/pen/qBWMoGx?&editable=true&editors=101
Scott
