CODEWITHSUNDEEP
javascriptquasar-frameworkquasar
Tester
Tester

Reputation: 808

q-select multiple how to close the popup when select

how to auto-close the popup when using q-select multiple selections. The default behavior is the popup still open and waiting for the user to select another item.

https://quasar.dev/vue-components/select#Example--Multiple-selection%2C-counter-and-max-values

<q-select
  filled
  v-model="model"
  multiple
  :options="options"
  counter
  hint="With counter"
  style="width: 250px"
 ></q-select>

Upvotes: 2

Views: 2866

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

There is no default option available in quasar for that but yah you can achieve it using the custom slot option.

  <q-select
    filled multiple
    v-model="model"
    :options="options"
    label="Standard"
    color="teal"
    clearable
    options-selected-class="text-deep-orange"
  >
    <template v-slot:option="scope">
      <q-item v-close-popup
        v-bind="scope.itemProps"
        v-on="scope.itemEvents"
      >
        <q-item-section avatar>
          <q-icon :name="scope.opt.icon"></q-icon>
        </q-item-section>
        <q-item-section>
          <q-item-label v-html="scope.opt.label"></q-item-label>
          <q-item-label caption>{{ scope.opt.description }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </q-select>

codepen - https://codepen.io/Pratik__007/pen/jObywmR?editors=1010

So v-close-popup on q-item will close the popup on select of option.

Upvotes: 6

Related Questions