TextEditor displays wrong value after column/row move

Tags: #<Tag:0x00007efc600c7b60>
#1

Hello team.

I have a HOT table, which works as expected. I have set the manualColumnMove: true and column moving works as expected.

The issue is that editing the cells in the just moved columns, does not show the display value (correct one), but the previous one. The issue seems to be that the TextEditor is displaying the previous value.
I have checked the data source in the afterColumnMove callback and it is correct.

Here a video of the issue https://www.dropbox.com/s/p0un5dip1u9iarx/hot-move-edit-bug.mov?dl=0
You can see that:

  • at the begin the display value and the editing value are the same, so correct
  • after the move, the display value is correct, the editing value is wrong.

What could I do to solve this issue?
Thank you!!

PS: The HOT table in my project is driven by a complex data source (enterprise level), so I cannot post the source code.

#2

Hey @ccrnn

The HOT table in my project is driven by a complex data source (enterprise level), so I cannot post the source code.

can you only share the Handsontable configuration? Without sensitive data. The issue does not occur on our website https://handsontable.com/docs/6.2.2/demo-moving.html

#3

Sure.

Here is the react component:

<HotTable
  ref={this.hotTableComponent}
  data={interactor.dataSource.data}
  settings={interactor.tableSettings}
/>

And here the tableSettings object:

{
        colHeaders: true,
        rowHeaders: true,
        colWidths: interactor.columnsWidths,
        rowHeights: 30,
        renderer: cellItemRenderer,
        outsideClickDeselects: false,
        contextMenu: {
            items: getTableSettingsContextMenuItems(interactor),
        },
        manualColumnFreeze: true,
        manualColumnResize: true,
        manualColumnMove: true,
        manualRowMove: true,
}

What other information would help you?

Actually, you could use the development build here:
https://fluidtable-staging-muvtve05d.now.sh/document/0d8458f2-7e5a-4969-9297-442f8b841e0f
Account test@fluidtable.com, pass 123test123.

In a few days I will destroy this build, so test in any way you like.
Claudio

#4

Thank you, I have asked our developer to check the example.

#5

I just got a reply:

You’d need to use a different approach. Currently, you’re wrapping a cell with <span> but the editor still keeps the sourceData.
You should rather use the

elements that we share, and there add the <span>. Then the editor will be able to keep all the data.
#6

Hello Aleksandra, but this approach does not seem to solve the problem.
If I’ve understood correctly your advice, it adding span element to the td element provided in the custom renderer the issue.
I’ve removed all the code which added new child element, and I used the straight Handsontable.renderers.TextRenderer(instance, td, rowIndex, columnIndex, prop, value, cellProperties) function.

So now the td element contains just the value.

Here the updated build with the suggested change implemented:
https://fluidtable-staging-me8tliefa.now.sh/
Account test@fluidtable.com, pass 123test123.

Login, then open the document https://fluidtable-staging-me8tliefa.now.sh/document/0d8458f2-7e5a-4969-9297-442f8b841e0f

Thanks for the help!

#7

Hey @ccrnn

thank you for sharing additional details. I have asked our developer to investigate this case.

#8

Can I ask you to create a JSFiddle instead? It would be much easier to share code changes and our developer said that he does not know what value is held by cellItem.outputPrettified

#9

I see what you are saying but no I can’t. It’s a complex codebase, I cannot simply extract it.
cellItem is simply an object with contains a lot of logic about the cell and its outputPrettified is just a number/string which should be displayed.

In the linked example the output is always just a number.

#10

HI @ccrnn
@aleksandra_budnik is currently away and she asked me to help with your questions. I have just received a reply from our developer, I paste it below. Let me know if you find it helpful

In updateCellItemValuesFromChanges in TableInteractor file have changes param, which hasn’t changed the value after move. Eg when you move the second column to first, and edit some cell from the first column, it has a wrong coordinate - { row: 0, col: 1}.

But what is most important, this is our bug. Maybe it would be a solution to store target param from the afterColumnMove hook, and operate on it.

#11

Hello Natalia, thanks for the reply.

Ok, now that we know it’s a Handsontable bug, can you tell me if it has been prioritised for a bugfix release? When would I expect it to be fixed?

Implementing a workaround is really dirty and I would much prefer to not have to do it.

#12

Please give me some time, I will talk to our dev team and let you know when you can expect it to be fixed.

#13

Thank you very much

#14

Hi Claudio,

You have pretty nice project here.

It’s hard to debug minified code but I took a look and React Developer Tools gave me a hint. You have custom logic for renderer to read from your custom dataSource.cellItems but editor still reads data from data prop.

hotInstance.getSourceData() indicates that the order was changed outside of Handsontable then hotInstance.getData() returns reordered (again ?) columns because Handsontable thinks it should change the order. Which is recorded in our internal state.

My guess: you could use beforeManualColumnMove hook and block the default action by returning false. Then manualColumnMove plugin will be used only for the UI, and your state will be the source of truth.

Kind regards,
Wojciech

#15

Ooook now that makes sense! HOT was reordering the columns in its internal logic, based on the same data array.
Now returning false in the beforeColumnMove as you suggested fixes the behaviour of my spreadsheet.

Thanks for the help, you’ve been really useful!!
PS: maybe it’s worth to make it clearer in the documentation, so other people like me will not bother you in the future :wink:

#16