[Bug]: cellMeta reseted when updating data

[mass4441]

Describe the bug

I'm using cellMeta's to change cells color by updating the "className" attribute. But since Handsontable 14.1.0 this is not working anymore because as soon as the cell data is updated with a new value all the classes (className) for the cells are returning to their initial state.

Example :

Before setting color:

<td class="htAutocomplete current current-row current-col" tabindex="-1" role="gridcell" aria-colindex="4" aria-selected="true">Sample text</td>

After setting color ( with setCellMeta )

<td class="red-500 htAutocomplete current current-row current-col" tabindex="-1" role="gridcell" aria-colindex="5" aria-selected="true">Sample text</td>

After updating data

<td class="htAutocomplete current current-row current-col" tabindex="-1" role="gridcell" aria-colindex="4" aria-selected="true">Sample text updated</td>

Not sure what's causing this exactly but it seems that the cell meta's are reseted to their inital state.

Tested with version 14.0.0 and it's working as expected.

Video/Screenshots

No response

Provide a link to the demo with the bug reproduction

No response

Handsontable version

14.1.0

Framework version

Vue 3.3.4

Your environment

MacOS + Chrome

[adrianszymanski89]

Hi @mass4441

Thank you for reporting this. Can you please send a code demo where the issue is replicable? I checked the changes between 14.0 and 14.1, and I don't see anything that might cause this, so I need to see your implementation to determine what is causing the problem.

[mass4441]

Hello @adrianszymanski89

i tried to reproduce this behaviour in a fresh repo with Vue 3 and Handsontable 14.1.0 but it's working as expected.
The bug is only reproducted in our main project but the structure is way more complexe and realy hard to reproduce in a fresh repo.

But the issues seems to only affect the className meta and not the others ( we have multiple dynamic readonly on cells and it work properly ).

While typing this message i tried handsontable 14.1.0 with "@handsontable/vue3": "14.0.0" and now it's working.
Seems this commit is creating the bug: (e2b07e5)

[adrianszymanski89]

Hi @mass4441

If it works correctly on a fresh project, it should also work in your environment. I looked at the PR you mentioned, and it doesn't look like it would be the reason.

Did you try to do the fresh install of Handsontable in your project and delete node modules?

[mass4441]

Just tried to delete node_modules but still the same issue.

Only way to make it work is to use "handsontable": "14.1.0" and "@handsontable/vue3": "14.0.0".

Not sure if this help but after retrieving our datas from API with pass it to the HotTable component by updating the hotSettings object like this :

Template component :

<HotTable
            v-if="datas.length > 0"
            :settings="hotSettings"
        />

Inside props watcher :

this.hotSettings.data = newHotSettingsData;

I'll try again to reproduce this issue and let you know when i find why with version 14.1.0 my code is not working anymore.

[adrianszymanski89]

@mass4441

I'll be grateful for this, as that would help us narrow down the possible source of this issue. Still, it seems unlikely that something would work that differently in a developed and clean project.

[mass4441]

@adrianszymanski89

I finaly found a way to reproduce the issue in a new project.

This project https://github.com/mass4441/handsontable-bug reproduce the bug.

As you can see with handsontable 14.0.0 it's working (the color red (className) persist even if you update the data ) but as soon as you update to 14.1.0 it remove the class and we lose the color. (Same issue if we update data with the table directly and not the button)

But if you don't set custom "columns" array in hotSetting then it's working in 14.1.0.

Am i doing something wrong ? Or is it an issue with 14.1.0 ?

[adrianszymanski89]

Hi @mass4441

Thank you for the code. So far, I haven't been able to narrow down which change in 14.1.0 might be causing this. I will investigate it further and will update you soon.

[adrianszymanski89]

Hi @mass4441

I was able to reproduce this issue here: https://jsfiddle.net/handsoncode/6n51o9r0/1/ Indeed, it seems that defining the columns is responsible for this bug, but the thing I've found is that this issue was present all the time, not only in 14.1.0.

However, we have a similar issue reported internally, and it surely needs to be investigated more by our developers.

I will update you once we have any progress on this. So far, I haven't been able to find any workaround for this besides not defining the columns, but I know that it's not the best way to avoid it.

[mass4441]

Hello @adrianszymanski89,

thanks for your feedback.

Is it possible that it was working for us because we directly update the array hotSetting.data and we don't use setDataAtCell ?

Btw, updating hotSettings.data is a correct way to do ? Or should we avoid it and only use provided function (loadData, updateData, setData, ... ). ?

[adrianszymanski89]

@mass4441

Yes, that's what I also suspected, and we recommend using our dedicated methods to update the data.

[mass4441]

Hello @adrianszymanski89 ,

any update on this ? Do you think it will be fixed in the next release ?

Thansk !

[adrianszymanski89]

Hi @mass4441

It's not on our roadmap yet. We'll update this thread once it gets there.