Row selection changes upon ticking checkbox column

[se-kmarkiewicz]

In a table with enough rows to make it scrollable, when ticking a check box (added with the checkboxColumn), the scroll position moves to a totally difference position and selects a totally different row to the one that has been checked.

Versions used:

• react: 18.2.0
• react-datasheet-grid: 4.11.2

Steps to reproduce:

1. Take the example shown in the Getting started page (https://react-datasheet-grid.netlify.app/docs/getting-started)
2. Duplicate one of the records in the data array at least 15 times, so we're left with a scrollable table.
3. Tick the checkbox in one of the rows at the top (say; row 2)
4. Scroll down to the bottom of the table and tick the checkbox in the bottom row.
5. The scroll position of the table and selected row will be a different row entirely.

Code:

const [data, setData] = useState<Record<string, any>[]>([
    { active: true, firstName: "Elon", lastName: "Musk" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
    { active: false, firstName: "Jeff", lastName: "Bezos" },
]);

const columns = [
    { ...keyColumn("active", checkboxColumn), title: "Active" },
    { ...keyColumn("firstName", textColumn), title: "First name" },
    { ...keyColumn("lastName", textColumn), title: "Last name" },
];
return <DataSheetGrid value={data} onChange={setData} columns={columns} />;

Issue demo:
https://github.com/nick-keller/react-datasheet-grid/assets/141892564/a8eaeff8-7026-44ba-be5b-99c870a5e2f6

If it provides any help, I managed to implement an undesirable workaround in an attempt to understand the issue.
I copied the checkboxColumn implementation from here and made the amendments below. Seems the issue is related to timing of state updates.

Added:

const [didMouseDown, setDidMouseDown] = useState(false);

useEffect(() => {
    if (didMouseDown === true && !active) {
        setRowData(!rowData);
        setDidMouseDown(false);
    }
}, [didMouseDown]);

Modified:

return (
    <input
        className="dsg-checkbox"
        tabIndex={-1}
        type="checkbox"
        ref={ref}
        disabled={disabled}
        checked={Boolean(rowData)}
        // Modified the line below
        onMouseDown={() => setDidMouseDown(true)}
        onChange={() => null}
    />
);