Sorting on the same value will perform different result

[aclopezcertinia]

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!

[AllenFang]

hello, @aclopezffdc could you please give the some raw data? thanks!

[AllenFang]

btw, what version u used? react-bootstrap-table-next and react-bootstrap-table2-editor

[aclopezcertinia]

Hi! I'm using the following versions: "react-bootstrap-table-next": "0.1.15" "react-bootstrap-table2-editor": "0.2.1" Here, you can see raw data for the 10 first lines. I think you can reproduce it with that:

[{
    id: 0,
    field1: 'field 1 value 0',
    field2: 'field 2 value 0'
}, {
    id: 1,
    field1: 'field 1 value 0',
    field2: 'field 2 value 1'
}, {
    id: 2,
    field1: 'field 1 value 0',
    field2: 'field 2 value 2'
}, {
    id: 3,
    field1: 'field 1 value 0',
    field2: 'field 2 value 3'
}, {
    id: 4,
    field1: 'field 1 value 0',
    field2: 'field 2 value 4'
}, {
    id: 5,
    field1: 'field 1 value 0',
    field2: 'field 2 value 5'
}, {
    id: 6,
    field1: 'field 1 value 1',
    field2: 'field 2 value 6'
}, {
    id: 7,
    field1: 'field 1 value 1',
    field2: 'field 2 value 7'
}, {
    id: 8,
    field1: 'field 1 value 1',
    field2: 'field 2 value 8'
}, {
    id: 9,
    field1: 'field 1 value 1',
    field2: 'field 2 value 8'
}, {
    id: 10,
    field1: 'field 1 value 1',
    field2: 'field 2 value 10'
}]

Thanks in advance!

[AllenFang]

@aclopezffdc sorry for lately reply, I will look on it, thanks your information 👍

[AllenFang]

@aclopezffdc I think this is a bug when sort on the same value. because your field1 value almost the same.

BTW, after you click to edit the field2, the default selection will be empty, that is due to your raw data is different as following:

field2OptionsSelect = [{
                value: 1,
                label:'value1'
            }, {
                value: 2,
                label:'value2'
            }],

cell edit use the raw data instead of the formatted data!!

For the sorting issue, I will fix it soon, thanks

[aclopezcertinia]

Thanks to you! :)