React-data-grid: Cell editing issues when cell range selection is enabled

Created on 7 Feb 2019 · 5Comments · Source: adazzle/react-data-grid

Which version of React JS are you using?

✅ Officially supported ✅

[ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

[ ] v15.5.x
[ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

[x] v16.x.x

Which browser are you using?

✅ Officially supported ✅

[ ] IE 9 / IE 10 / IE 11
[ ] Edge

- [x] Chrome

I'm submitting a ...

[x] 🐛 Bug Report

Issue Details

What the current behavior is
When using cellRangeSelection in combination with editable columns there is some weird behavior when editing a cell. Currently when you enter a value in a cell editor, and then click on another cell, the value is entered into the newly selected cell rather than the original. See the following video: https://bit.ly/2Scqpi9
What the desired behavior is
When the editor is open for a specific cell the value entered should be set on that cell.
(If Bug) Steps to reproduce the issue
The issue can be recreated here: https://codesandbox.io/s/nrvr29x0lj

bug wontfix

Source

cleaver86

👍5

Most helpful comment

So the reason this is happening is that when cellRangeSelection is used the grid binds to the mouseDown event rather than the click event to set the cell selection. This means the editor blur event is triggered after the cell selection has updated already and the wrong cell is now the target for the value.

I'm currently using a custom editor like this to get around the issue:

class CustomEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: this.props.value
        };
    }
    // The following workaround is necessary to prevent React Data Grid from
    // setting input data to the wrong cell when cellRangeSelection is used.
    componentDidMount() {
        document.addEventListener('mousedown', this.handleMouseDown, true);
    }
    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleMouseDown, true);
    }
    handleMouseDown = (e) => {
        e.stopPropagation();
        this.props.onCommit();
    }
    //////////////////////////////////////////////////////////////////////////
    getValue() {
        const key = this.props.column.key;
        return { [key]: this.state.value };
    }
    handleChange = (e) => {
        this.setState({ value: e.target.value });
    };
    getInputNode() {
        return this.refs.input;
    }
    disableContainerStyles() {
        return true;
    }
    render() {
        return (<input
            ref="input"
            value={this.state.value}
            onChange={this.handleChange}
            style={{
                width: this.props.column.width,
                height: this.props.height
            }}
        />);
    }
}

cleaver86 on 7 Feb 2019

❤8 👍2 🚀1

All 5 comments

I'm currently using a custom editor like this to get around the issue:

class CustomEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: this.props.value
        };
    }
    // The following workaround is necessary to prevent React Data Grid from
    // setting input data to the wrong cell when cellRangeSelection is used.
    componentDidMount() {
        document.addEventListener('mousedown', this.handleMouseDown, true);
    }
    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleMouseDown, true);
    }
    handleMouseDown = (e) => {
        e.stopPropagation();
        this.props.onCommit();
    }
    //////////////////////////////////////////////////////////////////////////
    getValue() {
        const key = this.props.column.key;
        return { [key]: this.state.value };
    }
    handleChange = (e) => {
        this.setState({ value: e.target.value });
    };
    getInputNode() {
        return this.refs.input;
    }
    disableContainerStyles() {
        return true;
    }
    render() {
        return (<input
            ref="input"
            value={this.state.value}
            onChange={this.handleChange}
            style={{
                width: this.props.column.width,
                height: this.props.height
            }}
        />);
    }
}

cleaver86 on 7 Feb 2019

❤8 👍2 🚀1

Yes, Same issue coming to me..

jimitit on 14 Feb 2019

👍1

It is fixed in this PR: https://github.com/adazzle/react-data-grid/pull/1489

szogun1987 on 20 Mar 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.