Cell editing issues when cell range selection is enabled

[cleaver86]

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 ☣️

• v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• IE 9 / IE 10 / IE 11
• Edge
• Chrome

---

I'm submitting a ...

• 🐛 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

[cleaver86]

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
            }}
        />);
    }
}

[jimitit]

Yes, Same issue coming to me..

[szogun1987]

It is fixed in this PR: #1489

[stale]

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.

[zahidraza]

This is a very critical bug for using copy and paste feature.

The issue is still not fixed but has been automatically closed.