nick-keller
onSelectionChange triggered by render & events unrelated to selection change
Making this its own issue.
onSelectionChange is triggered every time anything about the spreadsheet content changes, the spreadsheet first renders, re-renders, an undo-function changes its internal state, and on every single keystroke while typing in a cell.
The Docs say it should only be called when the selection changes or the grid is blurred.
Example: https://codesandbox.io/s/cool-platform-8083xp?file=/src/App.js
Related to: #230.
@larissa-n in your example, the alert is called everytime I focus on the window. Can you update it so that it can be reproduced easily.
@hussamkhatib Yes. The problem is with the definition of onSelectionChange, a useEffect function that gets called whenever the spreadsheet content changes, the sheet re-renders, the sheet is first focused, etc.
You should be able to fork the Codesandbox example. It's just the DynamicDataSheetGrid component with an onSelectionChange prop, nothing complicated. Here's another version: https://codesandbox.io/s/agitated-lena-q3sppn?file=/src/App.js
I created the issue when we were on 4.10.1, but the behavior is still the same.
Also check the related issue about the onBlur function.
@nick-keller Thanks for looking into this!
@larissa-n I think the problem is not related to the onSelectionChange callback - this code causes the problem:
const columns = [
{
...keyColumn("col", textColumn),
title: "Col"
}
];
On every render, a new instance of the columns array is created, causing the DynamicDataSheetGrid to re-initialize. On initialization, an onSelectionChange event is triggered.
If your columns array does not change at runtime you could use the static version of the grid (DataSheetGrid) and/or define the columns array outside the App function.
If your columns array changes at runtime, you could wrap the array definition in useMemo() instead. Here is an example: https://codesandbox.io/s/vigilant-faraday-kpf7nv?file=/src/App.js
