DataTable with Virtual Scroller and Multiselect; onSelectionChanged provides incorrect selections and [...undefined, undefined, ...]

[nikcich]

Describe the bug

This is sort of 2 problems, both related to the Shift+Click row selection.

1. Incorrect selections being provided onSelectionChange
   • Click selecting one row, followed by scrolling and shift+clicking another to select all elements between. In my example I select row 0 and shift+click row 150, which the onSelectionChange callback shows as selecting 151 total rows (correct) but with rows 80-231 instead of 0-150. See the video below.

2024-06-24.19-07-56.mp4

2. Selections provided onSelectionChange include numerous undefined rows.
   • I am assuming this has something to do with the virtual scroller. Similar to the first issue described, I am selecting row, then scrolling down and shift+click selecting another. This often results in a number of the selected rows returned in the onSelectionChange callback being undefined. See the video below.

2024-06-24.19-08-59.mp4

I have also seen both of these issues happen together (I believe the second video shows this)

Reproducer

https://stackblitz.com/edit/vitejs-vite-to2pri?file=src%2FApp.jsx

PrimeReact version

10.6.5

React version

18.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Click select a row (e.g. the row 0)

2. Scroll down a number of "pages" so the virtual scroller loads more data

3. Shift+Click to select up to and including another row (e.g. row 150)

4. Observe the console.log values and what is visually shown as being selected in the table

Expected behavior

I would expect the onSelectionChanged callback to return an accurate list of selected rows, and not to have any rows undefined.

[sja-cslab]

Same as #5870 ?

[nikcich]

I saw that issue (5870) prior to submitting this one. Definitely a similar problem. At the very least, my issue has the added fact that it selects incorrect rows in addition to others being undefined.