Issue with Dynamic Sorting in QTable based on User Input

Question

Detail:

I am facing a challenge in implementing dynamic sorting in Quasar's > QTable component. Specifically, when users interact with the name column and type into an input field, I want the table to actively sort the column with each keystroke. However, I'm encountering an issue where sorting is not prevented while the input is in focus, and I would like it to trigger the sort() method only when the input field loses focus (onBlur event).

<template>
  <div class="q-pa-md">
    <q-table
      ref="table"
      v-model:pagination="pagination"
      title="Treats"
      :rows="myRows"
      :columns="myColumns"
      row-key="name"
    >
      <template #body="props">
        <q-tr :key="props.rowIndex" :props="props">
          <q-td
            ><q-input
              :key="props.row.id"
              v-model.lazy="props.row.name"
              dense
              borderless
          /></q-td>

          <q-td
            ><q-input
              :key="props.row.id"
              v-model.lazy="props.row.value"
              dense
              borderless
          /></q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script lang="ts" setup>
import { ComponentPublicInstance, ref } from "vue";

const columns = [
  {
    name: "name",
    label: "Name",
    field: "name",
    sortable: true,
  },
  {
    name: "value",
    label: "Value",
    field: "calorvalueies",
    sortable: true,
  },
];

const rows = [
  {
    name: "Frozen Yogurt",
    value: 159,
  },
  {
    name: "Ice cream sandwich",
    value: 237,
  },
  {
    name: "Eclair",
    value: 262,
  },
  {
    name: "Cupcake",
    value: 305,
  },
  {
    name: "Gingerbread",
    value: 356,
  },
];

const table = ref<ComponentPublicInstance>();
const myRows = ref(rows);
const myColumns = ref(columns);

const pagination = ref({
  rowsPerPage: 0,
});
</script>

What I've Tried:

I have attempted to implement the dynamic sorting functionality by handling user input in the name column. However, the sorting continues even when the input field is in focus.

Expected Behavior:

I expect the table to refrain from sorting while the input is in focus and initiate the sorting process only when the input field loses focus.

I appreciate any insights or suggestions to help resolve this issue. Thank you!

Answer 1

Solution:

I needed to remove the v-model directive from the inputs and do it the old school way with value and onUpdate. With this vue doesnt change the row ref's value until we fire the update event.

 <!-- other Code -->

  <template #body="props">
    <q-tr :key="props.rowIndex" :props="props">
      <q-td
        ><q-input
          :key="props.row.id"
          :model-value="props.row.name"
          dense
          borderless
          @update:model-value="onUpdate"
          @blur="onBlur(props.row, 'name')"
      /></q-td>

      <q-td
        ><q-input
          :key="props.row.id"
          :model-value="props.row.value"
          dense
          borderless
          @update:model-value="onUpdate"
          @blur="onBlur(props.row, 'value')"
      /></q-td>
    </q-tr>
  </template>

 <!-- other Code -->

  <script setup>
    // other code

    const modelHolder = ref()

    const onUpdate = (v: string | number | null) => {
      modelHolder.value = v
    }

    const onBlur = (rowValue: any, rowProp: any) => {
      if (modelHolder.value) {
        rowValue[rowProp] = modelHolder.value
      }
      modelHolder.value = ''
    }
  </script>