q-table @selection evt is undefined if overriding any template.

[mcmahonr]

I'm trying to implement the custom-multiple-selection with q-popup-edit for the cells.

When I added my template to the body slot I noticed the evt object was undefined when the onSelection function was called. It doesn't know if shift is pressed or not.

Thinking it was just my template, I removed my template altogether and it worked (The multi selection worked without the q-popup-edit ability)

I figured I'd try something simpler and implement just a button change to learn more about the behavior so I took the code from the selection-cell-slots example which uses the body-selection and header-selection slots. When I do this evt is undefined when passed to the onSelection function. When I remove the templates using the slots evt is there.

This might just be that I don't understand JavaScript well enough yet, it seems like implementing a slot clobbers the evt before it's passed into the onSelection function.

In the below code using the shift button will not multi select. If you remove the two templates within the q-table object it will work.

  <div class="q-pa-md">
    <q-table
      ref="tableRef"
      title="WatchList"
      :rows="rows"
      :columns="columns"
      row-key="data"
      selection="multiple"
      :selected="selected"
      @selection="onSelection"
      :rows-per-page-options="[0]"
    >
      <template v-slot:header-selection="scope">
        <q-toggle v-model="scope.selected" />
      </template>

      <template v-slot:body-selection="scope">
        <q-toggle v-model="scope.selected" />
      </template>
    </q-table>
  </div>
</template>

<script>
import { useQuasar } from "quasar";
import { ref } from "vue";

export default {
  props: {
    columns: Array,
    rows: Array,
  },
  setup(props) {
    const $q = useQuasar();

    const selected = ref([]);
    const lastIndex = ref(null);
    const tableRef = ref(null);

    return {
      selected,
      lastIndex,
      tableRef,

      getSelectedString() {
        return selected.value.length === 0
          ? ""
          : `${selected.value.length} record${
              selected.value.length > 1 ? "s" : ""
            } selected of ${props.rows.length}`;
      },

      onSelection({ rows, added, evt }) {
        if (rows.length === 0 || tableRef.value === void 0) {
          return;
        }

        const row = rows[0];
        const filteredSortedRows = tableRef.value.filteredSortedRows;
        const rowIndex = filteredSortedRows.indexOf(row);
        const localLastIndex = lastIndex.value;

        lastIndex.value = rowIndex;
        document.getSelection().removeAllRanges();

        if ($q.platform.is.mobile === true) {
          evt = { ctrlKey: true };
        } else if (
          evt !== Object(evt) ||
          (evt.shiftKey !== true && evt.ctrlKey !== true)
        ) {
          selected.value = added === true ? rows : [];
          return;
        }

        const operateSelection =
          added === true
            ? (selRow) => {
                const selectedIndex = selected.value.indexOf(selRow);
                if (selectedIndex === -1) {
                  selected.value = selected.value.concat(selRow);
                }
              }
            : (selRow) => {
                const selectedIndex = selected.value.indexOf(selRow);
                if (selectedIndex > -1) {
                  selected.value = selected.value
                    .slice(0, selectedIndex)
                    .concat(selected.value.slice(selectedIndex + 1));
                }
              };

        if (localLastIndex === null || evt.shiftKey !== true) {
          operateSelection(row);
          return;
        }

        const from = localLastIndex < rowIndex ? localLastIndex : rowIndex;
        const to = localLastIndex < rowIndex ? rowIndex : localLastIndex;
        for (let i = from; i <= to; i += 1) {
          operateSelection(filteredSortedRows[i]);
        }
      },
    };
  },
};
</script>

[mcmahonr]

Just found this is a known issue I will follow this.