How to de-select a cell?

[saunandrea]

The problem I'm having is that if a user clicks to edit a cell but then does something on another view that changes the data and re-renders the BootstrapTable, the cell is still focused and retaining the old value until the user clicks somewhere else on the table. Neither reset nor cleanSelected seem to have any effect. Should these methods be able to do what I'm trying?

I tried the following:

onBootstrapTableRef(instance) {
    this.bootstrapTableRef = instance;
}

componentDidUpdate() {
    this.bootstrapTableRef.reset(); //feel like either of these lines should do the job
    this.bootstrapTableRef.cleanSelected();
}


public render() {
    const cellEdit = {
        mode: "click",
        blurToSave: true
    }

    return (
                <BootstrapTable data={this.props.settings} keyField="settingStage"
                    bordered={false} striped cellEdit={cellEdit} ref={this.onBootstrapTableRef}>
                    ...
                </BootstrapTable>
            </div>
        </div>
    );
}

[AllenFang]

HI @saunandrea I'll clean the cell editing state in the reset function, thanks 👍

[saunandrea]

@AllenFang Wonderful, thank you! First question/issue I've ever posted and very grateful to have a such a quick response.

[AllenFang]

👍 :)

BTW, react-bootstrap-table already stop new feature development, and I've plan to rebuild it >> https://github.com/react-bootstrap-table/react-bootstrap-table2 this is still work in progress and if you think there's still something hard to use in react-bootstrap-table, I think you will be interesting on it, check it in the future and pay some attention on next generation react-bootstrap-table. Thanks 👍

[AllenFang]

Fixed on v4.0.4 and try it again, thanks

[saunandrea]

@AllenFang Hey Allen, I'm sorry to say I gave it whirl and I'm still not able to get the cell selection to be reset.

[AllenFang]

ah, I only clean the cell edit, but forgot to row seleciton

[AllenFang]

Fixed on v4.0.5.

[ajitStephen]

@saunandrea @AllenFang
How to reset edit cell in react-bootstrap-table2 ?

[craciunbogdangeorge]

How to leave edit mode from a cell after saving (pressing Enter triggers the afterSaveCell function, but the cursor remains active in the cell)?

[RashmiMadlerappa2018]

Hi @AllenFang
How to clear the selected rows in react-bootstrap-table2 after successful save like cleanSelected in react-bootstrap-table