nadbm
having issue with selected/onSelect/rowRenderer
Please try the below code sandbox https://codesandbox.io/s/xjp98zmyqz
I am trying to implement rowRenderer with controlled select option, facing issues with controlled selection and rowRenderer.
selected and onSelect works fine, but not with rowRenderer. After selecting a cell the selection won't go away, while moving around all the cells are getting selected. Please try the code sandbox to understand easily (https://codesandbox.io/s/xjp98zmyqz)
data={this.state.grid}
valueRenderer={cell => cell.value}
onCellsChanged={changes => {
const grid = this.state.grid.map(row => [...row]);
changes.forEach(({ cell, row, col, value }) => {
grid[row][col] = { ...grid[row][col], value };
});
this.setState({ grid });
}}
//comment the below line and works fine
rowRenderer={props => <tr className="data-row">{props.children}</tr>}
selected={this.state.selected}
onSelect={selected => this.setState({ selected })}
/>
Am I missing anything in the rowRenderer?
The same issue could happen to those who use a custom sheetRenderer. It is, however, turn out not to be a coding problem of this repository.
I tried a lot and observed that the datasheet is unable to focus. It sharing the same root cause with this question.
In short, the setState triggers a re-render and eventually your rowRenderer function has become another instance. In this scenario React cannot distinguish by-design and will re-render everything.
A quick way to verify this is to use the inspector from the devtool and select an arbitrary cell. Once you clicked on another cell, your selected element has gone. This means all of the cells are removed and then inserted from the real DOM. Of course this won't preserve the focused state so it ruin basically every operations from dragging the mouse around to using the keyboard to navigate between cells.
You will have to come up with your own solution so that the rowRenderer function do not change from time to time.
