Handsontable losing meta information on re-render

[raffiosos]

Describe the bug

This might be similar to https://forum.handsontable.com/t/on-re-render-cell-meta-data-lost/5459. I am using React with typescript. I have a functional component wrapper HotTableComponent that wraps the HotTable component. The intent is to use this wrapper in different pages with minimum configuration:

export const HotTableComponent = forwardRef<HotTableClass, HotTableComponentProps>(function HotTableComponent( props, forwardedRef ) { ... return ( <HotTable ref={hotRef} colWidths={props.colWidths} ...

The validation logic is all encompassed within HotTableComponent and the idea is that it will validate the data, and call some setters for:

1. the data
2. cells that have errors
3. boolean if any cell is faulty (so that I disable some high level Upload button accordingly)
4. ...

A higher level component is rendering HotTableComponent and passing those setters. Those setters are basically useState setters. When the user copy/pastes data, HotTableComponent validates it, and calls setData, setDataValidity, setErrors, etc. and the higher level component will display those errors and enable/disable Upload button

The problem is changing state on the higher level component is re-rendering HotTableComponent, which is re-rendering HotTable, and that's causing the cell meta objects to be lost and the red highlighting of the cells to disappear

I tried calling re-rendering in different places (hotRef.current?.hotInstance?.render()), validating upon load on HotTableComponent, etc. and nothing worked. I even tried to manually save the cell meta in afterValidate function, and then restoring the cell meta upon load and even that didn't fix the highlighting issue

afterValidate =(...) => { props.setCellMeta?.(hotRef.current?.hotInstance?.getCellsMeta()); }

and during load: export const HotTableComponent = forwardRef<HotTableClass, HotTableComponentProps>(function HotTableComponent( props, forwardedRef ) { const hotRef = useRef<HotTableClass | null>(null); useImperativeHandle(forwardedRef, () => hotRef.current as HotTableClass);

const inst = hotRef.current?.hotInstance;

props.cellMeta?.forEach((cell) => {
    hotRef.current?.hotInstance?.setCellMetaObject(cell.row, cell.col, cell);
});
hotRef.current?.hotInstance?.render();

Please advise Thanks Raffi

Video/Screenshots

No response

Provide a link to the demo with the bug reproduction

No response

Handsontable version

handsontable/react@14.5.0

Framework version

No response

Your environment

Windows 11, Chrome

[adrianszymanski89]

Hi @raffiosos

Thank you for contacting us. It would be best if you could share a code demo in StackBlitz showing your current implementation. That way, it would be easier to check the problem.

[AMBudnik]

Hi @raffiosos

Without a demo, we won't be able to replicate the issues. Could you please share anything that can help us?