primereact
primereact copied to clipboard
DataTable: 10.8.2 Next.JS, Column Filters, DragSelect w/ Multiple Selection Mode making unexpected/incorrect selections
Describe the bug
When using Next.JS and DataTable, if you set the datatable up with multiple row selection enabled and column filters, the selection is not reliable/selects the incorrect records when a column filter is active. The selection appears to behave normally otherwise.
Reproducer
https://stackblitz.com/edit/stackblitz-starters-d96cc6?file=app%2Ftest-table.tsx
System Information
"dependencies": {
"@types/node": "^22.5.5",
"@types/react": "^18.3.6",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.11",
"next": "^14.2.11",
"postcss": "^8.4.47",
"primereact": "^10.8.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"tailwindcss": "^3.4.11",
"typescript": "5.2.2"
}
Steps to reproduce the behavior
- Test the drag selection without a filter - it will work normally
- Add a column filter, for example, filter the
namefield to-3so you only see users likeuser-3oruser-31 - Drag over the rows in the datatable with this filter enabled, you will see it is incapable of selecting the visible rows, but appears to select something else that is not visible, though the diagnostic of this is pretty difficult
- If you want, you can console.log the selection as it changes and you will see unexpected rows being selected
- I also found that the same happens with metakey like using shift to click one record and select a range
Expected behavior
A column filter is able to be active, and the user should be able to select what is visible on screen.