primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.64k stars 1.24k forks source link

DataTable: Rows are unintentionally reorderable #6805

Open koglerch13 opened 4 days ago

koglerch13 commented 4 days ago

Describe the bug

Repro on Stackblitz: https://stackblitz.com/edit/dgakbc

It seems that an <a> element inside a column-template makes the DataTable appear as if it could be reordered (even if re-ordering is not explicitly configured)

Alternative Repro (if StackBlitz is not available):

<template>
  <ThemeSwitcher />
  <div class="card">
    <DataTable :value="products" tableStyle="min-width: 50rem">
      <Column>
        <template #body="slotProps">
          <a href="#">Drag this!</a>
        </template>
      </Column>
      <Column field="code" header="Code"></Column>
      <Column field="name" header="Name"></Column>
      <Column field="category" header="Category"></Column>
      <Column field="quantity" header="Quantity"></Column>
    </DataTable>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';

onMounted(() => {
  ProductService.getProductsMini().then((data) => (products.value = data));
});

const products = ref();
</script>

Reproducer

https://stackblitz.com/edit/dgakbc?file=src%2FApp.vue

PrimeVue version

4.2.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

  1. Go to the StackBlitz: https://stackblitz.com/edit/dgakbc
  2. Click + Drag on any of the "Drag This" columns.

Observed Row gets "draggable" (but never actually reorders the table)

Expected behavior

Row does not appear "draggable"

github-actions[bot] commented 7 hours ago

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.