React-bootstrap-table2: Input is not calling onClick or onChange when click outside, but still selecting

[tfcb93]

I'm trying to use the custom selection to select multiple or all rows elements in my application. I used it as described in storybook. But I'm having a problem that if you select outside the checkbox it is not triggering my functions, but still selecting the elements. I also notice that the same thing is happening after cloning and running on my computer.

I am passing an onClick function (and a dummy onChange, because react is complaining if I only use onClick) but it's only triggering my functions when I click on the input. When I click outside it is still selecting, but none of my functions are being called.
Bellow, I recorded a gif of my problem. When I select all, it prints true for each of my items. Each item print it's check value too.

Notice that nothing is printed when selected outside the box.
Also, the problem persists if I include clickToSelect: true to select using the entire row.

Someway to avoid the selection when clicking outside? Or a way to trigger the events when clicking outside?

P.S.: I notice that in the first version (react-bootstrap-table) this works well, even if you click outside or in the entire row.

[AllenFang]

@tfcb93 firstly sorry for lately reply, I'm wondering where you put your console log?

Let me explain selection behavior:

1. No matter user click on checkbox or selection column which must trigger selection event, even clickToSelect is false
2. for custom selection case, so far we allow developer to custom the checkbox/radio button instead of whole td cell and actually, the on click event is binding on td cell which mean you don't need to add click event on checkbox/radio button.

So let me know where's your console log so that I can help you to check.
Any suggestion is welcome, I can help, thanks!

[tfcb93]

Hi, @AllenFang Thanks for the answer and sorry to only replying to it now.
I mostly copied the example done in the storybook.

const selectRow = {
    mode: 'checkbox',
    selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
    <input
       type="checkbox"
       ref={ (input) => {
       if (input) input.indeterminate = indeterminate;
       } }
       { ...rest }
       onClick={() => console.log(rest.checked)}
       onChange={()=>{}}
    />
    ),
      selectionRenderer: ({ mode, ...rest }) =>
    <div>
    <input
       type={ mode }
       checked={rest.checked}
       disabled={rest.disabled}
       rowindex={rest.rowIndex}
       onClick={() => console.log(rest.checked)}
       onChange={()=>{}}
    />
  </div>
}

And added it to the BootstrapTable tag:

<BootstrapTable bootstrap4
  striped
  bordered={false}
  selectRow={ selectRow }
  {...props.baseProps} />

I hope this can helps you.

P.S.: I had to add onChange={()=>{}} because React creates a warning if I do it without an onChange method.

[AllenFang]

@tfcb93 I see. It's meet my expectation. Like I said above

because you add onClick event on input instead of td which means if user clicking on outside of checkbox, your onClick event callback will not be called. but the reason of selection still work is actually we bind a onClick event on td element.

In you case, if you want know some row is select or not, I will suggest you to use selectRow.onSelect

here is an online example

Let me know if you still have any question, thanks

[tfcb93]

Thanks a lot! This works perfectly for me!