Cell validation lost when parent component re-renders

Getting help Issues
,
1

I am using the React version of Handsontable. When placed inside a parent component, any changes to the parent component naturally re-render the child component, which in my case is the Handsontable.

So far I have not noticed any related issues other than cell validation, which completely resets when the parent component causes a child component re-render. I am hoping there is some React or Handsontable magic to solve this, as I have tried every combination of Handsontable hooks, events, and React effects to resolve this.

Here is a simple example with two major problems that I did not encounter when I used the plain JS version of Handsontable.

  1. Validation does not occur on data load, and the afterLoadData prop does not provide a reference to the HotTable ref, so I’m not sure how we can validate initial data.
  2. More importantly, any re-render coming from the parent clears all validation.

All of the data and HTML and JSX (with minor excecptions) is from the React example

To see what I mean, please observe

  1. No initial cell validation
  2. Change any of the values in Company Name. There is a validator setup such that any value is an error. Now click the “Click me” button at the top of the page. This causes the parent component to re-render causing the Table to re-render and the result is all validation is reset.

Please note I have of course trivialized this into a simple example. In our real-world app, we have some things in the parent component that may completely re-set the state of the data property, and there are a few callbacks and other props passed to Table from the parent.

https://codesandbox.io/p/sandbox/qjhf7p?file=%2Fsrc%2Findex.tsx

2

Hi @anthony.agostino

Thank you for contacting us. Can you please try to use the validateCells() method with React’s useEffect hook? Then it should be fired on initialization and each time the table is re-rendered. You can access it through the instance method from our React wrapper: Instance methods - React Data Grid | Handsontable

PS. I can’t edit your CodeSandbox so id that won’t work for you, please make it public.

3

Okay… I don’t love it that I have to re-validate on every render… but it works I guess.

For reference I had to modify the useEffect to take no params

  useEffect(() => {
    if (table.current?.hotInstance && data) {
      console.log("validateCells in useEffect", { data });
      table.current.hotInstance.validateCells();
    }
  });

I feel like there are other hidden problems here… For now I have to call validateCells() on every render, but what other state is the react wrapper not maintaining?

4

@anthony.agostino

Currently it’s the only way to make sure the table is correctly validated. Updating the state in React invokes table re-rendering and because of the current architecture some of the internal states (like validation) could be reset.

1 Like
5

I also lose manually set metadata, like “readOnly”. This means every time the parent renders, I have to almost re-do the entire table. Is there a reason that the table does not maintain its state?

6

Hi @anthony.agostino

That’s true. We recently recognize this problem and we will be working on fixing this situation. I will update you as soon as we have the solution ready.

1 Like
7

Fantastic, thanks.