Vaadin Lazily loaded grid shows same 50 rows in loop.

[ankeshKapil]

Description

Bug Description:

In a grid component utilizing a backend data provider to load data in a paginated manner based on user scrolling, we are experiencing an issue for certain users where rows repeat during scrolling. For affected users, the same 50 rows are rendered repeatedly. However, clicking on any row to display details shows the correct data.

This issue is inconsistent and cannot be reproduced in the local environment. From the browser console, we observe that new data is fetched in batches of 50 rows, but the DOM is not refreshed accordingly.

Additionally, in the Vaadin console, the following error is logged:

Error: This ChildPart has no parentNode and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from the DOM. For example, setting the element's innerHTML or textContent can cause this.

The root cause seems to be a failure in DOM updates during data fetch operations.

Expected outcome

1. No errors should appear in console after the fix
2. Display of grid should be fixed

Minimal reproducible example

Its just a normal grid with backend dataproivder

Steps to reproduce

Inconsistent so not easily reproduceable

Environment

Vaadin version(s): 24.4 OS: windows

Browsers

No response

[ankeshKapil]

Error messages in browser console when this error happens

[yuriy-fix]

Dear @ankeshKapil, it wouldn't be possible to fix the issue without steps to reproduce / reproducible example. Could you please share the setup that you are using at the moment, so it can be tested locally?

[ankeshKapil]

@yuriy-fix unfortunetly i havent found any way to reproduce it as these errors are coming from javascript code. Can you suggest some way to debug javascript code to find out the actual vaadin class ?

[yuriy-fix]

Dear @ankeshKapil,

Thank you for your response! To help us investigate the issue further, it’s essential that we have a “minimal reproducible example” - a small part of the code (it can be Java code) that includes the grid and reproduces the issue you are encountering. This will allow us to replicate the problem on our side and debug it more effectively.

For reference, here’s an example of what a minimal reproducible example could look like in an issue: #6081.

Since debugging JavaScript issues can be highly dependent on your environment (IDE, OS, and setup), providing general debugging instructions isn’t feasible. However, once we have a sample of your code, we’ll be happy to investigate further and try to identify the root cause.