[GH #7567] Code in hooks stops associated function from working

Tags: #<Tag:0x00007f3436dd5f60> #<Tag:0x00007f3436dd5e20>

Hi there

Basically, when I add code to an event hook function associated with the event stops working.

For example, I want to set a flag when a filter is applied to a column, so I register the hook afterFilter and have it set a page state value when a filter is completed. However, the presence of code in that hook prevents the filter from working, and nothing happens after I enter data in the filter, and click OK.

I assume I’m correctly doing things, but am open to the possibility that I’m doing it wrong. Thanks in advance.

Here’s an example. I’m using react, by the way.

  componentDidMount() {
       const hti = this.hotTableComponent.current.hotInstance;
       hti.addHook("afterFilter", this.afterFilter);

afterFilter = (e) => {
    //comment out the line below to have filters work
    this.setState({ gridIsFiltered: true });

The Grid settings are:

  hotSettings = () => {
    return {
      licenseKey: "non-commercial-and-evaluation",
      data: this.props.values.dataToView,
      colHeaders: this.colHeaders(),
      colWidths: this.colWidths(),
      columns: this.columns(),
      rowHeaders: true,
      readOnly: false,
      manualColumnMove: true,
      manualRowMove: true,
      manualColumnResize: true,
      manualRowResize: true,
      filters: true,
      dropdownMenu: [
      columnSorting: true,
      contextMenu: this.contextMenus(),
      autoWrapRow: true,

Hi @andy

some time ago, I have reported the same issue on our Github board https://github.com/handsontable/handsontable/issues/7567

I will notify you once we fix it. You can also leave a comment there to be notified once a developer is attached to the task.

1 Like

That’s helpful to know. Thanks for taking the time to reply. It also pretty much sinks my plans to use HandsonTable for my project.