React-table: checkboxHOC toggling checkbox resets pagination

[patvdleer]

What version of React-Table are you using?

6.7.6

What bug are you experiencing, or what feature are you proposing?

BUG
checkboxHOC toggling checkbox resets pagination

Code

based on https://react-table.js.org/#/story/select-table-hoc

<CheckboxTable
              data={collection}
              defaultFilterMethod={filterCaseInsensitive}
              // eslint-disable-next-line no-return-assign
              ref={(r) => this.checkboxTable = r}
              columns={columns}
              defaultPageSize={10}
              className="-striped -highlight pointer-on-hover"
              loading={loading}
              filterable
              resizable
              keyField={'id'}
              {...checkboxProps}
            />

What are the steps to reproduce the issue?

Selecting/toggling a checkbox resets the pagination, i.e. it resets the page displayed back to 1.
This happens somewhere in/after the onClick of defaultSelectInputComponent

onClick: function onClick(e) {
      var shiftKey = e.shiftKey;

      e.stopPropagation();
      props.onClick(props.id, shiftKey, props.row);
    },

Somehow this does not happen in your example but I can not, for the life of me, figure out what this is causing. Can this be caused by the data loading async?

[gary-menzel]

I'd need to see a full example in codesandbox. However, if you are also loading data, you need to keep your own checkbox state in line with the data that is being loaded.

The props.onClick does nothing more than calling the toggleSelection passed into the component by the user. As in this snippet:

      const inputProps = 
      {
        checked,
        onClick: toggleSelection,
        selectType,
        id: row[keyField],
        row,
      }
      return React.createElement(this.props.SelectInputComponent,inputProps);

If your toggleSelection is fetching new data or otherwise changing props then this may be causing ReactTable to redraw. As I said, I'd need to see a working (broken) example that I could play with to see what could be causing it.

[tannerlinsley]

Since this is a question of implementation we invite you to continue the conversation in the react tools slack organization. Thanks! https://react-chat-signup.herokuapp.com/

[patfrat]

Hello ! I know this issue is closed but i have encountered the same issue when sorting then clicking on checkboxes.
It was just a mistake that i made adding const CheckboxTable = checkboxHOC(ReactTable); in the render method of my component !
Removing this outside my class after import and it works !

[Reiracode]

Hello ! I know this issue is closed but i have encountered the same issue when sorting then clicking on checkboxes.
It was just a mistake that i made adding const CheckboxTable = checkboxHOC(ReactTable); in the render method of my component !
Removing this outside my class after import and it works !

thanks a lot,

[siffash]

In our case it was because of using the prop filtered, once it was changed to defaultFiltered the problem was gone (now the table is not re-rendered every time you click on the checkbox).