React-table: Lose focus on input in a cell

[claraonmars]

Describe the bug
In version 6.9, we lose focus on input fields in cell on keystroke.

To Reproduce
Go to this sandbox link to reproduce the behavior
https://codesandbox.io/s/reacttable-cell-renderers-with-custom-props-lhmzm?fontsize=14

Expected behavior
Go to this sandbox link to view expected behavior
https://codesandbox.io/s/reacttable-cell-renderers-with-custom-props-2pomf?fontsize=14

Additional context
The difference between the two sandboxes is only the version of React-Table. (between 6.8.6 to 6.9)

[LuisPaGarcia]

Just find out how to add an editable input to react-table without losing focus:

state = {
  data: [ { id: 1 }, { id: 2 }, { id: 3 }  ]
}

handleInputChange = (cellInfo, event) => {
    let data = [...this.state.data];
    data[cellInfo.index][cellInfo.column.id] = event.target.value;

    this.setState({ data });
};

renderEditable = (cellInfo) => {
    const cellValue = this.state.data[cellInfo.index][cellInfo.column.id];

    return (
        <input
            placeholder="type here"
            name="input"
            type="text"
            onChange={this.handleInputChange.bind(null, cellInfo)}
            value={cellValue}
        />
    );
};

render(){
<ReactTable 
...
columns={[
    {
        Header: 'Id',
        accessor: 'id',
        Cell: this.renderEditable
    }
]}
/>
}

[tannerlinsley]

This is one of the issues we've seen repeatedly with the old v6 React Table API. I'm not sure what can be done at this point, other than getting v7 out as fast as possible.

Hi there! It looks as though you've submitted an issue, feature request, or question regarding v6 of React Table, which I am no longer maintaining or supporting. I invite you to try the latest alpha release of v7 and help me push towards a v7 release soon. Thankyou!

If you still wish to discuss v6, please use https://spectrum.chat/react-table.

[NeriedAU]

Hi, had this issue with v6.10.0 and dropped back to v6.8.2. Focus is retained now after input update. I chose this version to try as it was not occurring in another project of mine using this version of react-table. I have not checked later versions to confirm where the regression is.

[evenfrost]

LuisPaGarcia's solution worked for me. Essentially you just need to move your Cell render function to component method to retain function signature. So instead e.g.:

Cell: () => <input type="text" />

you'll need to write it like this:

// inside related React class component
this.renderInput = () => <input type="text" />
// ...
Cell: this.renderInput

This fixed the issue for me.