Custom cell component with select not re-rendering on search filter

[chringel21]

Hi @uwla ,

sorry to bring this up again, but this issue is very similar to #91 .

If a custom cell component contains a select input based on data and the selected option is changed, the change is not reflected when applying a search filter, even though the underlying data is updated correctly using the userEvent event.

I created a CodeSandbox where you can see the issue:

• Change the status select input for the third row to anything other than "Status 1"
• Search for "sebert", the third entry's email address

Current output
The updated status remains in the third row. The select input is not updated correctly.

Expected output
The select input is updated correctly when a search filter is applied.

Bildschirmaufnahme.2024-10-10.um.12.35.35.mov

Thanks again for your help!

[uwla]

Hello!

Thanks for being so clear in the description of the issue, because I already know what could be causing the bug.

I'll take a look it and try to fix it this weekend.

[uwla]

@chringel21 I got it fixed but only if you catch the userEvent emitted from the status component and then update the status of the original data.

How it is working now: mark entry X with 1 and entry Y with status 2. If filter only shows entry Y, then entry Y will correctly have status 2, but after filter is cleared, the status of Y remains and the status of X becomes empty. That is because we render each row in a for loop, and after the filter is applied, the component with the status is destroyed, along with its internal state. The only way to keep the internal state is to update the original data.

[uwla]

I forgot to update the code. I updated it and released a minor version, v2.1.2.

This bug has been partially fixed.

The problem is: only some components are rendered and when you filter them out, they are destroyed by Vue along with their state. I was not able to use KeepAlive to preserve their state. If I render all rows using Vue, then we will have performance issues.

I think the best way to handle it is for you to mutate the original array after the component is updated. I'll share a demo on how to do that soon.