anjunatl / react-table-bug-repro

Row deselection bug in react-table

Summary

react-table (seen in both v7.5.1 & v7.6.3) with manualPagination & useRowSelect crashes when deselecting rows that are not on the currently visible page. Data for this example is provided by Laravel's server-side pagination

• Row deselection bug in react-table
  • Summary
  • Reproduction steps
    • toggleAllRowSelected - not all rows get cleared
      • Expected behavior
      • Actual behavior
    • toggleRowSelected - crashes
      • Expected behavior
      • Actual behavior
  • Bug details
  • Potential fix
  • Example source highlights
  • Related GitHub issues / PRs

Reproduction steps

toggleAllRowSelected - not all rows get cleared

1. Run docker-compose up to start the example
2. Choose one to many rows on the first page
3. Change to another page
4. Choose another one to many rows
5. Click the "Do something" button

Expected behavior

The selected row counter should reset to 0.

Actual behavior

The selected row counter is not 0 & is the sum of selected rows on non-visible pages

toggleRowSelected - crashes

1. Run docker-compose up to start the example
2. Click the "Mode" button to change it from "All" to "Row" to enable use of toggleRowSelected
3. Choose one to many rows on the first page
4. Change to another page
5. Choose another one to many rows
6. Click the "Do something" button

Expected behavior

The selected row counter should reset to 0.

Actual behavior

The page crashes

Bug details

This started when trying to use toggleAllRowsSelected(false) to clear all the selected rows, but that resulted in only the current visible rows being deselected - you could go to the other pages with previously selected rows and still see them selected.

To work around this, I tried tracking the selected row IDs externally & using toggleRowSelected(rowId, false) to iterate over the selected IDs to set selected=false but then the page crashed when it tried to toggle a row that was not visible.

Using toggleRowSelected, the following lines in useRowSelect.js break when a not-visible row is being deselected:

const row = rowsById[id]    // off-page row = undefined
if (!row.isGrouped) { ...   // errors here

• By design when server-side pagination is enabled, only the displayed rows are returned from the API - IE page[] = rows[]
• useRowSelect seems to expects rows[] to have all possible, not just the currently visible ones

Potential fix

• Not sure if this is a proper fix but it fixed the crash at least
• cd demo/laravel/react-table && git checkout repro-potential-fix
• cd ../../.. && docker-compose build && docker-compose up

Example source highlights

• react-table instance
• demo page that loads data from api
• api endpoint that returns paginated data from the controller
• controller that returns test data
• test data

Related GitHub issues / PRs

• https://github.com/tannerlinsley/react-table/pull/2651/files - unrelated to this issue but happens to partially fix the crash
  • const isSelected = row.isSelected -> const isSelected = id in state.selectedRowIds
  • Fixes #2171
• https://github.com/tannerlinsley/react-table/pull/2666/files -
  • const isSelected = row.isSelected -> const isSelected = state.selectedRowIds[id]
  • Fixes #2659 & 2171
• TanStack/table#2833
  • Another "Cannot read property 'isGrouped' of undefined" error, not sure if they're using manualPagination or if it's the same root cause