react-bootstrap-table2: [Bug] Can't click radio button if using setState inside handleOnSelect

For those looking for a solution to the radio/checkbox toggle disabling when calling setState:

What works for me is setting the selected property in the selectRow object you pass to the table. selected: [this.state.selectedUserId], as mentioned by @AllenFang (16 April comment above)

I understand the legacy react-bootstrap-table allow you to call setState without manage/control the selection by selectRow.selected. So it can be improved in react-bootstrap-table2, but with much lower priority

@AllenFang Same problem occurs with multiple selection. Here is the codesandbox https://codesandbox.io/s/93jj53kkpp

remove the setState from the App part and try:

    this.setState({ 
      selection: selection
    });

@AllenFang I am also having the same problem but I am using remote and redux. My redux state does not change but when an onClick event happens but it causes the table to re-render for some reason. This causes the selected row radio to not show and also makes my current page on the pagination shows 1 even though I am on page 4 for example.

It seems your intention for the onSelect was for the user of the component to manage the state of the selections.

However, it seems to be the common use case is not to manage the selection - but to simply be notified and take some other action on the selection.

Perhaps you could simply add a property of customSelectStateManagement or something that when set would behave as it does now - assuming user will manage state. If it is false (the default) the grid manages the state but calls the event handlers as simply call backs.

Just my thoughts

I thought this was still an issue, but checking the storybook above, it does work if you send the onSelect function to a method somewhere inside your component, and do it there. Make sure the keyField on your table matches the things you are saving in your array of selected items - I made that mistake and as soon as I fixed it, behold it worked!

@ngohungphuc I my opinion, setState will trigger the component render again, so in your case, it will make the react-bootstrap-table broken for selection row. If you really need to call setState, I will recommand you to also manage the selection by yourself:

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedUserId: ''
    };
  }

  onSelectAccount = (row) => {
    console.log(row);
    console.log(row.id);
    this.setState({ selectedUserId: row.id });
  };

  render() {
    const selectRow = {
      mode: 'radio',
      clickToSelect: true,
      selected: [this.state.selectedUserId],
      onSelect: this.onSelectAccount
    };

    return (
      <BootstrapTable
        keyField="id"
        data={ products }
        columns={ columns }
        selectRow={ selectRow }
      />
    );
  }
}

How do you think?