Combination of Edit cell and Select row

[dana2208]

Hello,

I found 2 implementations that feel not right when combining the edit cell and the select row feature.
Here is the way I combine them:

const selectRowProps = {
  clickToSelect: true, 
  clickToSelectAndEditCell: true, 
  mode: "radio", 
  className: "row-selected", 
  hideSelectColumn: true
};
const cellEditProps = {mode: "dbclick"};
<BootstrapTable ref="table" data={this.dataSet} cellEdit={cellEditProps} selectRow={selectRowProps}>

So what I expect is:

• after one click: row is selected.
• after double-click: cell is in edit mode and row is (still) selected.

And here are the 2 actual behaviors:

1. If I want to edit 2 cells of the same row, then first time I double-click it selects the row (which is OK) and second time it deselects it. I would expect that if the row is already selected (because I already selected it or because I already edited another cell in the same row), then it does not unselect it, but rather leave it selected. However when editing a cell in another row, then this new row should be selected.
   This change is very simple and is to be implemented in handleEditCell(rowIndex, columnIndex) of TableBody.js.
   Instead of:
   this.handleSelectRow(rowIndex+1, !selected);
   Write:
   if (!selected) {
this.handleSelectRow(rowIndex+1, true);
}
   I can make a PR if you want.
2. Selection of the row works only after double-clicking. This is due to this code in BootstrapTable.js that is called after component updated and that is run if cellEdit is defined on the table:
   if (this.props.cellEdit.mode !== Const.CELL_EDIT_NONE)
this.props.selectRow.clickToSelect = false;
   Since clickToSelect is overriden with value false then in function rowClick(e) of TableRow.js the function this.props.onSelectRow(e.currentTarget.rowIndex, !this.props.isSelected) is not called.
   However selection occurs when double-clicking because in TableColumn.js the function handleCellEdit(e) is called which bubbles up to handleEditCell(rowIndex, columnIndex) of the TableBody.js which calls the function this.handleSelectRow(rowIndex+1, true); because property clickToSelectAndEditCell is true.
   So all this cycle does not take into account that my selection was after one click and not after double-clicking.
   I didn't try to think of a solution for this wrong behavior. If after my explanation you already know how to fix this then I will be glad, elsewhere I can try to think on a solution and make a PR. What do you say?

Thanks

[dana2208]

Hi,

This is point 2 of my issue

Selection of the row works only after double-clicking

If you follow my explanation you'll understand why this happens.

Let me know about point 1 if you want this tiny PR.

Thanks

BTW I am @dana2208 not dana :)

[AllenFang]

@dana2208, sorry, I found your explanation, so tired, a busy year. Anyway, I'll check this problem at first and discuss with you, thanks :)

[AllenFang]

@dana2208, I thinks I've solve this issues, but if you give selectRow and enable clickToSelectAndEditCell, there will be a tiny delay to prevent a selection changed when user dblick to edit cell on same row but different cell. it will be released on new version in recent

[AllenFang]

Released on v1.5.2 :)