DataTable (Virtual Scroll): Cannot set properties of undefined (setting 'tabIndex')

[LiamRiddell]

Describe the bug

The issue has been raised and closed before incorrectly see #3650. The major DataTable changes mentioned in #3682 does not fix this issue.

Source:

primevue/components/lib/datatable/DataTable.vue

Line 1001 in 0cedd48

DomHandler.find(body, 'tr.p-selectable-row')[index].tabIndex = '0';

Reproducer

https://stackblitz.com/edit/angular-7eg97z?file=src%2FApp.vue

PrimeVue version

3.27.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Open developer console.
2. Select and existing row on screen and you should see a log message with "Index X".
3. Scroll down a few hundred rows and click another row. It throws an exception:
   
4. Clicking the row again will then show the correct log message "Index X".

Expected behavior

There shouldn't be an error and the row is selected correctly the first time and does not require a secondary click to change the row correctly.

[Cersin]

same problem

[chrisnoden]

I get the error clicking on any row that isn't on page 1 of a paginated datatable

[itsserbin]

same problem

[nnyiri]

I get the error clicking on any row that isn't on page 1 of a paginated datatable

The same here.
It's pretty disturbing...

[barthy-koeln]

I have opened PR #3984 to fix this issue. I have mainly tested it on paginated datatables.
The problem of removed DOM nodes is the same though.

[LiamRiddell]

Great, thank you @barthy-koeln. I was going to come back around and put a PR in but you beat me to it!

[1993garik]

Hello @barthy-koeln, the problem solution is not published yet, right ?

[christianschoenmakers]

We use the row-click emit to trigger a redirect to a new page, this is also resulting in the same error.

[4ddev]

The issue persists; however, there is a specific pattern in my case. The datatable functions as expected within a single paginated page. However, when I navigate to a different page within the same pagination, the error is triggered once. After that initial occurrence, the error does not appear again until another page change occurs.

[barthy-koeln]

@1993garik and the rest :)

I have given up on keeping the PR up to date. I was going to look into actually fixing the tabindex changes but got discouraged seeing the 5000+ lines files of vanilla JS and direct DOM manipulation in Vue.js files.

[reksc]

I'm getting the same error at 3.41.1.

targetRow is null and so setting tabIndex = '0' fails.

attn @tugcekucukoglu