Vuetify v-data-table click on row

Question

I'm currently working on a vue project using vuetify as our main component-library. We display some information with the v-data-table component and are redirecting to another view if a row is clicked. This works totally fine. In user testing an unexpected behaviour occured. If the user tries to highlight the value of a column e.g. to copy the value, he is redirected as if the whole row is selected.

<template>
  <v-data-table
    :headers="columns"
    :items="filteredPlannings"
    :item-class="setDeactivationClass"
    :items-per-page="itemsPerPage"
    :custom-filter="searchFunction"
    multi-sort
    :loading="isFindPending"
    :search="search"
    loading-text="Loading... Please wait"
    hide-default-footer
    :page.sync="page"
    @page-count="pageCount = $event"
    @click:row="handleRowClick"
    @pagination="pagination = $event"
  >

  </v-data-table>
</template>

<script> 
export default {
  setup(props, context) {
    const {$router} = context.root;
    
    const handleRowClick = ({ id }) =>
      $router.push({ name: "ProjectDetails", params: { id } });
    
    return {
      handleRowClick,
    }
  }
}
</script>

Answer 1

You can manipulate with native window.getSelection() method to avoid this. Just prevent your router.push event emit when there's something in selection:

<v-data-table
  ...
  @click:row="handleRowClick"
></v-data-table>
...
data () {
  return {
    ...
    lastSelectedItem: null,
  }
},
methods: {
  handleRowClick(item) {
    if (window.getSelection().toString().length === 0) {
      this.lastSelectedItem = item.name; //Use router.push here
    }
  }
}

Test this at CodePen.

But personally I don't think it's a good UX to use @click:row in your case. Possibly you should use @dblclick:row event, or create a special "Actions" column with a "Link to..." button.