Sorting on the same value will perform different result #422
Description
class myComponent extends Component { constructor(props) { super(props); this.state = { data: [] }; } componentDidMount() { let data = [], counter = 0; for (let i = 0; i < 100; i++) { data.push({ Id: i, field1: 'field 1 value ' + counter, field2: 'field 2 value ' + i }); if (i % 5 === 0) { counter++; } } this.setState({ data: data }); } render() { const field2Options = { 1: 'value1', 2: 'value2' }, field2OptionsSelect = [{ value: 1, label:'value1' }, { value: 2, label:'value2' }], field2Formatter = (cell, row, rowIndex, formatExtraData) => { return "false" == String(cell) ? 'value2' : 'value1'; }, columns = [{ dataField: 'Id', text: 'Id', sort: true }, { dataField: 'field1', text: 'Field 1', sort: true }, { dataField: 'field2', text: 'Field 2', sort: true, formatter: field2Formatter, editor: { type: Type.SELECT, options: field2OptionsSelect, }, editable: true, }], editOptions = { mode: 'click', blurToSave: true }; return ( <BootstrapTable keyField='Id' data={ this.state.data } columns={ columns } cellEdit={ cellEditFactory(editOptions) } /> ); } } Hi,
Using the previous component, if you sort "Field 1" ascending and you click on some cell for "Field 2" to edit it (don't need to change the value), when you click on another cell and the focus is lost, you can see that the "Id" value is changing in the editable line. So I cannot edit the line that I want to change.
It is like if the component is sorting data each time the cell is changing to edit mode.
You can have a look to the video in this link: https://drive.google.com/file/d/1UXtGMdPPwLfQBafQkNsUs7di0LVFhakg/view?usp=sharing
I'm not sure if I'm doing something wrong in the configuration or it could be an issue. Could you please have a look?
Thanks in advance!