My bad (RTFM)… Adding ‘fill-input hide-selected’ gives me the desired functionality!

<q-select v-model="userInput" :label="label" use-input @filter="filter" @input="input" :options="options" fill-input hide-selected />

Hi, I don’t understand the default implementation of the QSelect with a filter (just single select).

The component works fine for the initial selection, but if the user wants to change what he has selected, the previous selected value stays in the filter-input.
This is very complicating for the users, when they want to change this text (and re-filter) to select a different item.

I think this only useful in ‘multiple’ mode, not on a single select filtered QSelect.

Is there a way for me to work around this?
Or maybe something can be changed in this component to at least configure it to use the previous selected value as filter?

The example on the Quasar page shows what I mean:
https://quasar.dev/vue-components/select#Example--Show-options-in-menu

• Select the component (Simple filter)
• Type something (i.e. ‘Ap’)
• Select Apple
• Select the component again
• Try to change Apple using the keyboard

This is a good solution, but I wonder if my solution is good/efficient:

In my situation the menu is a context menu, dynamically generated on a (navigation) QTree and a (search) QTable.

Because the tree and table may change a lot, I cannot give a unique reference to all menus (because the references in the page will continue to grow).
So I use a reference array and close all currently existing menus (even though only one can be open):

this.$refs.contextMenu.forEach(e => e.hide())

Secondaly, as far as I know (but I hope that’s my lack of knowledge) a reference array is only created from a v-for loop, which I don’t have in the QTree.
I solved this by looping one time for every branch:

<q-tree ...>
  <template v-slot:default-header="{ node }">
    ...
    <template v-for="item of 1">
      <q-menu :key="item" context-menu ref="contextMenu">
        ...
      </q-menu>
    </template>
  </template>
</q-tree>

If there is a better way to solve (one of) these problems, I’m eager to know

I hope I understand your problem correctly, but you can implement the default tooltip slot and give it a max-width.

<q-tooltip>
  <template v-slot:default>
    <div style="max-width:100px">
      {{largeText}}
    </div>
  </template>
</q-tooltip>

Hi,

I want to have (filterable) select-box in a sub menu, but I don’t know how to close the menu’s after the user selected a value.

I want (very simplified) something like this structure:

<q-menu>
  <q-item 1/>
  <q-item 2>
    <q-menu>
      <q-select @input="(v-close-popup)">
        <q-item />
      </q-select>
    </q-menu>
  </q-item>
</q-menu>

I have tried a v-close-popup=“3” on the q-select-option’s q-item, but that does not work…

I tried to create a code pen, which illustrates my problem:
https://codepen.io/DennisVanBeek/pen/NWqYwYw

Best regards,
Dennis

Ah, now I see it… my test was incorrect.

I tried to validate the form directly after the page was mounted, but I guess the sub components were not loaded yet, so that’s why the form was always valid.
When I execute the same form validation on a button click or something (so a bit later), it works perfectly!
(also without greedy it find’s the first error without a problem…)

Thanks again!

Thanks for thinking along…

According to the docs, greedy makes a difference in continuing with the validation when a problem was found.
But in my model it does not encounter any problems, because he does not go ‘deep’ enough.

To make sure, I also tested it, but also with greedy the q-form-validate() returns true (even though a lot of components are not valid).

Thanks for your reply…

(and our business objects do not have a fixed size, so they can contain hundreds of fields, but usually they contain less :p)

Thanks a lot for your reaction…

I’ve tried this, but I think the q-form only checks the first level of elements, and the quasar fields I want to validate, or defined in their own componets (in sub group components)…

My Vue model is something like:

<QForm>
  <Group>
    <QCard>
      <SingleTextLine>
        <ValidationContainer>
          <QInput...>
        </ValidationContainer>
      </SingleTextLine>
    </QCard>
  </Group>
  <Group>
    <QCard>
      <Address>
        <ValidationContainer>
          <QInput...>
          <QInput...>
          <QInput...>
          ...
        </ValidationContainer>
      </Address>
    </QCard>
  </Group>
  <Group>
  ...
</QForm>

I can create a separate q-form for every component, but that wouldn’t help a lot (and could create a few hundred forms for every page).