The below does the trick for me …

emit-value
map-options

Me toooooo

If an option is selected in q-select and if we press tab key to move the focus to the next element in the form, q-select selects the next option and then jumps focus to the next element.
So I’m unable to move on to next element without the q-select option getting changed

          <q-select
            label="Server"
            v-model="thisIp.selectServer"
            use-input
            hide-selected
            fill-input
            input-debounce="0"
            autofocus
            Xemit-value
            option-value="value"
            :options="this.selectServerList"
            @filter="filterSelectServer"
            :error="$v.thisIp.selectServer.$error"
            @blur="$v.thisIp.selectServer.$touch"
            error-message="Please select server"
            dense
            options-dense
            bottom-slots
          ></q-select>

Gone through the document but not able to find any option to prevent this behaviour.

@metalsadman can give a suggestion on this as unable to find whats causing this issue …

@metalsadman thank you for looking into this.

Please find the link to codepen https://codepen.io/Stuffy1/pen/QWWOVrq?

Awesome! @metalsadman you are a saviour every time I struggle with Quasar … Thank you so much!

               <q-item
                  v-for="plan in plans.data"
                  :data="plan"
                  :key="plan.id"
                  :active="thisOrder.planId==plan.id"
                  active-class="text-orange-10 mnu_active"
                  class="q-pb-md"
                >

Can someone guide on how to higlight the selected item when using v-for

Unable to find anything related in docs. active-class works if without v-for

              <q-list :padding="true">
                <q-item
                  v-for="plan in plans.data"
                  :data="plan"
                  :key="plan.id"
                  clickable
                  @click="btn(plan.id)"
                  v-ripple
                  active-class="text-orange-10 mnu_active"
                  class="q-pb-md"
                >

Seems in V1 highlight is deprecated …

@benoitranque the above code doesn’t seem to highlight the selected q-item. Can you please check.

              <q-list highlight :padding="true">
                <q-item
                  highlight
                  v-for="plan in plans.data"
                  :data="plan"
                  :key="plan.id"
                  clickable
                  @click="btn"
                  v-ripple
                  active-class="text-orange-10 mnu_active"
                  class="q-pb-md"
                >

Ahh, that seems to do the trick. Thank you.

One more thing, during the next page being fetched from the server the current page vanishes and shows a one liner loading ists. This kind of hinders the UI. Is there was way to show the curret page as it is (the loading/ progress bar under the row header is active as expected) till next page is loaded. Removing the loading-label doesn’t help.