AfterChange not being fired post upgrading to v15.1

Tags: #<Tag:0x00007f51bfc5b670> #<Tag:0x00007f51bfc5b3c8>
#1

Greetings, I’m in the process of upgrading our Handsontable Angular package to the latest version. We were using v13 previously, then I upgraded to v14 and everything seemed to work fine, now, after upgrading to v15.1, our components are not working as expected anymore.

I’m not sure why, but the afterChange hook is not being fired anymore. I can add breakpoints in it, or logs but nothing happens.

The hook is being fired just fine with our previous version (v14). Any clue of what has changed from v14 to v15? The migration docs seem to focus on React.

There are no error logs in the console, no exceptions are being captured when using ‘Pause on uncaught exceptions’ and ‘Pause on caught exceptions’.

The beforeChange hook is being fired just fine.

This is our Handsontable configuration:

  hotSettings = {
    colHeaders: true,
    height: constants.TABLE_MIN_HEIGHT,
    width: 'auto',
    readOnly: true,
    disableVisualSelection: true,
    rowHeaders: false,
    rowHeights: [],
    mergeCells: [],
    cell: [],
    filters: true,
    hiddenColumns: {
      columns: []
    },
    trimRows: true,
    renderAllRows: true,
    licenseKey: this._getLicense(),
    afterChange: this._afterChange.bind(this),
    afterSelectionEnd: this._afterOnCellMouseUp.bind(this),
    afterRender: this._afterRender.bind(this),
    beforeAutofill: this._beforeAutofill.bind(this),
    beforeChange: this._beforeChange.bind(this),
    beforePaste: this._beforePaste.bind(this),
    afterInit: this._applyFilters.bind(this),
    renderer: this._renderer.bind(this),
  };
#2

Hi @perez.andres

I just used your settings (with some help of AI to generate missing variables) and it all seems to work well. Please check this demo https://stackblitz.com/edit/m9ywpcba-uskpyjse?file=src%2Fapp%2Fapp.component.ts.

I commented out readOnly: true as this does not allow us to alter data and we wanted to check afterChange hook. We can, however, see that it is also triggered on the initialization of the table which is a desired behavior.

Please tell me if there is any other way I can replicate the issue that you encountered?

#3

This is interesting, I found the following code in our project:

  protected _runBatch<R>(wrappedOperations: () => R) {
    const tableInstance = this.tableInstance;

    tableInstance.removeHook('afterChange', this.hotSettings.afterChange);
    tableInstance.batch(wrappedOperations);
    tableInstance.addHook('afterChange', this.hotSettings.afterChange);
  }

When using v14, this.hotSettings.afterChange contains our custom hook definition (this.hotSettings is the object I shared in the initial post), but when we upgrade to v15, it does not, and instead it defaults to the Handsontable one.

Not sure what could possibly change in the package so that the initialization changed and the function is being overwritten.

For now removing the removeHook and addHook seem to work, but I would like to know what could possibly be changing the definition of afterChange here.

#4

We can also propose a code review (service available in Priority+ plans). Otherwise I would need to get a full demo to replicate the issue. Without an ability to replicate the issue it would be hard to help.