How to access/overwrite internal menu component from QSelect?

  • @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.


  • 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">

  • 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?

    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. 😁


  • @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. 😃


  • @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 attribute multiple is set. Like see the right example with the label “Multiple”:

    1. you click on the QSelect
    2. a menu opens
    3. you can select an option
    4. – the menu stays open –
    5. 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…


  • 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.


  • @s-molinari yeah, but there are many ways to solve this, there’s also slots like before-options and after-options maybe adding a button there that will fire a method or whatever. no need to do something with the inner qmenu imo, and if use-input is used it will fire most native events.

  • YES!! @blur THAT’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.


  • @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.


Log in to reply