I have a handsontable instance that gets its values using redux and the model contains multiple related models using their respective model Ids. The code is in react and this is the snippet of the portion of the code on how it behaves
const effectCalled = useRef<boolean>(false);
//Memoize the filtering of objectStyles until standardId changes and objectStyle changes
const filteredStyles = useMemo(
() => objectStyles.filter((objectStyle) => objectStyle.StandardId === standardId),
[objectStyles, standardId]
);
useEffect(() => {
const handsontableInstance = hotTableObjectStyleRef.current?.hotInstance;
if (!effectCalled.current) {
fetchAllData(dispatch);
// find standrad name from id
setStandardName(standards.find((standard) => standard.Id === standardId)?.Name);
effectCalled.current = true;
}
handsontableInstance?.updateData(JSON.parse(JSON.stringify(filteredStyles)));
}, [objectStyles, dispatch, filteredStyles, standards, standardId]);
const detectChanges = () => {
const handsontableInstance = hotTableObjectStyleRef.current?.hotInstance;
const currentData = handsontableInstance?.getSourceData().filter((row) => row.Name);
if (filteredStyles.length > 0 && currentData && currentData?.length > 0) {
if (
JSON.stringify(filteredStyles) !== JSON.stringify(currentData) ||
currentData.length !== filteredStyles.length
) {
setChangesMade(true);
}
}
};
The detectChanges is used in the HotTable for the afterChange and afterRemoveRow hooks. When I filter the handsontable using the Column filter from the context menu and try to modify the a cell value it resets the handsontable to the original state instead of maintaining it. I am using React 18.2.0 and handsontable 12.3.3