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.

This sounds weired but on clicking pagination Next, q-table flashes last page before showing the next page. This happens on fresh page load, once pages are traversed then it moves to next page smoothly.
Did someone come across this or have any suggestions looking at the below code?

        <q-table
          gridX
          :data="lists.data"
          :columns="columns"
          row-key="id"
          selection="none"
          :loading="tblLoading"
          loading-label="Loading lists"
          :pagination.sync="pagination"
          :rows-per-page-options="rowsPerPageOptions"
          @request="onRequest"
          binary-state-sort
          :selected.sync="selected"
          flat
          separator="none"
          rows-per-page-label="Show"
          hide-headerX
          color="primary"
          table-class="tblData"
          card-class="bg-white text-brand"
        >

      pagination: {
        sortBy: "id",
        descending: true,
        page: 1,
        rowsPerPage: 7,
        rowsNumber: 0,
        skip: 0
      },
      rowsPerPageOptions: [7, 10, 25, 50, 100],

    onRequest(requestProp) {
      this.tblLoading = true;
      let {
        page,
        rowsPerPage,
        rowsNumber,
        sortBy,
        descending
      } = requestProp.pagination;
      this.pagination = requestProp.pagination;
      const skip = (page - 1) * rowsPerPage;
      this.pagination.skip = skip;
      this.pagination.rowsPerPage = rowsPerPage;
      return this.findLists(this.listQuery())
        .then(response => {
                this.tblLoading = false;
                // set pagination
                this.pagination.rowsNumber = response.total;
                this.pagination.page = page;
                this.pagination.rowsPerPage = rowsPerPage;
                this.pagination.sortBy = sortBy;
                this.pagination.descending = descending;
                this.pagination.skip = skip;
              })
              .catch(e => {
               ...

In latest quasar the below works

<q-table ...
    table-class="tblData"

.tblData tbody td{
    background: none !important;
}
.tblData tbody tr:hover {
    background-color: #f6fafe;
}