SetState within custom context menu resets the table

Tags: #<Tag:0x00007efc605fb640>

Hi

I have noticed that a SetState within a context menu function causes the table to reload, which resets any column sorts that have been applied.

I’m using react 17.0.2 with HandsOnTable 7.4.2.

The table is initialised with a function called HotSettings() which is referenced in the render section by the HotTable like so

< HotTable
ref={this.hotTableComponent}
id={this.id}
settings={this.hotSettings()}
/>

The context menu setup looks like this:

return {
items: {
Rows: {
// Own custom option
name: “Row…”,
callback: function (key, selection, clickEvent) {
const selectRows = this.selectRows;
setTimeout(function () {
const start = selection[0].start;
selectRows(start.row, start.row);
visualiserShow();
}, 300);
},
}

The function visualiserShow() above contains a SetState, and when it is hit it causes the Table to load again, something demonstrated by the presence of a console.log in the HotSettings() function. The reloading the table causes it to reset and clears all sorts. The purpose of the context menu is to load a modal which contains analysis tools for the selected row.

Is there a way round this?

A bit of background on the above code:

  • I reported a similar problem when a setState is used an a code hook in this thread and was advised that downgrading to version 7.4.2 would fix this in this thread.
  • I’m using the SetTimeout function in the context menu to deal with a problem described in this thread.

Andy

Hi @andy,

I answered in the thread of context-menu items referring to the main table - you can find my message here.

The problem with setState and resetting everything in Handsontable is a consequence of changes introduced in v8. Although - the workaround, described in that comment, uses mismatched versions of wrapper and table. If you would like to downgrade Handsontable to v7.4.2, you should also downgrade the wrapper version to the @handsontable/react@3.1.3.

The problem with state manipulation in the context menu’s item is in the synchronous callbacks. You can put setState in setTimeout, to be sure that the context-menu instance will be destroyed. Here is a working demo: https://stackblitz.com/edit/react-djucsf

I want to mention that’s a workaround rather than the best practice - but until we fix the problem with updateSettings, perhaps it’s the only option to avoid problems.