DataTable 10.8.4: Drag Selection is still broken

[SolidAnonDev]

Describe the bug

Drag Selection on DataTable has been broken for about 2 versions now. Initially my issue #7192 regarding drag selection selecting incorrect records when column filters are enable.

Issue supposedly addressed in #7200

Issue is no longer causing an error but a selection cannot be made, seems to be a combination of the weird inability to highlight/select text that came up in #7221

It's also broken on the primereact official site as well, found here:

https://primereact.org/datatable/#multiple_rows_selection

Reproducer

https://stackblitz.com/edit/vitejs-vite-5pcr8o?file=src%2FApp.tsx

System Information

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    primereact: ^10.8.4 => 10.8.4 
    react: ^18.2.0 => 18.2.0

Steps to reproduce the behavior

1. Go to reproducer link and attempt to make a drag selection
2. You will see the behavior is not correct

Expected behavior

You are able to drag over a set of rows and make a drag selection successfully.

For what it's worth, one working version I could find is in 10.6.6 though I haven't checked beyond that,

[melloware]

@gcko ???

[gcko]

I'll check it out

[schotime]

I'm still seeing #7221 and have confirmed the issue still present in 10.8.4.

[feg3jvl]

For those who don't need to use onRowMouseDown in the DataTable implementation, the workaround I used to remove the draggable from the tables is this:

<PrimeDataTable onMouseDownCapture={(e) => { e.stopPropagation(); }}>
...

[gcko]

@SolidAnonDev your stackblitz has an issue with the function used for onSelectionChange -> changing e.data to e.value properly enables selection: https://stackblitz.com/edit/vitejs-vite-fqt3cm?file=src%2FApp.tsx

[SolidAnonDev]

@gcko I have updated the stackblitz, but am still seeing the same behavior both in the stackblitz and on the official site here:

https://primereact.org/datatable/#multiple_rows_selection

[SolidAnonDev]

Sorry, didn't mean to close/reopen.

[LeandroMarcondes]

I believe the issue is in the file /datatable/TableBody.js at line 600

The Method const onRowMouseDown = (e) => {

event.target.draggable = !isDraggableHandle; // maybe that negation needs to be removed

I don't understand why event.target.draggable is set to !isDraggableHandle, However, when I remove the negation (!), the selection functionality works again. Additionally, I tested other functions of the datatable, and everything is working correctly.

The last change to this file was in Fix #6998

@KumJungMin can you please let me know if this makes sense, and I can proceed with a pull request.

[KumJungMin]

@LeandroMarcondes

I refactored the existing code into a concise single line.
If removing the ! operator works smoothly, you might consider trying that modification. :)

[LeandroMarcondes]

That is great, thanks for clarifying that. I will submit a pull request just for that ! operator.