Default "afterChange" event fires with old data after custom "afterChange" hook

Suppose you have a hook like so… you want to prepend some text, or alter the value completely, after it makes it into the cell (I actually wish I could do this on beforeChange, or that there was some format function).

const myAfterChangeHook = (changes, source) => 
   if(source === "MyHook") return;
   for (const [row, col, original, updated] of changes) {
      hotTable.setDataAtRowProp(row, col, "Change: " + updated, "MyHook");
  }
}

Then you have some other hook listening for changes, basically to see if the data in the table has changed ever.

const myHookListener = (changes, source) => 
   // This will log two events in this order
   //  [0, 0, "value", "Change: value"], "MyHook"
   //  [0, 0, "", "value"], "edit" 
   console.log(changes, source);
}

This is surprising because the actual order of changes was
“” → “value” → “Change: value”
But it is not reported like this

This is a problem for me specifically because this hook is seeing if data in the cell has changed. It does this by storing a history. Now it thinks that the original value was “value” and the new value is “value”, and thus determines the change was undone.

Is there a workaround here, or is there a way to change the value before it hits the cell, like beforeChange or preformatData or similar? Maybe a way to change the priority of hooks…

Thanks.

I’d also like to point out that beforeChange behaves in the opposite way. To the above myHookListener I also place this it in a beforeChange hook.

As you can see, the hooks are caught in this order
beforeChange: edit → custom afterChange hook
afterChange: custom afterChange hook → edit

And the problem again is that in afterChange it is reported
“value” → “Change: value” → “” → “value”

But beforeChange goes
“” → “value” → “Change: value”

Hi @anthony.agostino

I will look into this and update you tomorrow.

Hi @anthony.agostino

In general, we don’t provide support for custom hooks and because of that implementing those on your own might results in such problems.

Hm, maybe a misunderstanding. I am using .addHook("afterChange") and what I notice is that this callback is called before the default “afterChange” handler (which has a “source” of “edit”).

I would like to know if it is expected that any callbacks attached to “afterChange” are called before the default “afterChange” hook, because it seems wrong to me. It means that the default “afterChange” hook is called last, but you’d expect it to be called first. Whereas with “beforeChange”, the default hook is called first!

Hi @anthony.agostino

Thank you for the explanation. Now I understand. I was looking to the possible reason for the for this behavior but I haven’t found anything yet. I will let you know when I have more information or possible solution.

1 Like