React-table: After filtering and select all rows (deselect does not work properly)

Created on 18 Feb 2020  路  4Comments  路  Source: tannerlinsley/react-table

Using v7

Thanks for using the beta version of React Table v7! We're very excited about it.

Describe the bug
I use react-table with row selection and filter functionality, and when I filter some rows and click on select all (header checkbox), I try to deselect one of the rows it does not work properly

To Reproduce
Steps to reproduce the behavior:

  1. Go to first name filter input and type "e"
  2. Click on checkbox at the top left corner of the table (the header checkbox to select all rows).
  3. Try to deselect beetle row (it does not work)
  4. See error

Expected behavior
Deselect will work properly when you try to deselect them after the filter and select all

Codesandbox!
https://codesandbox.io/s/upbeat-frost-7m6v4

Maybe I use the component, not in the right way I just combined filter and row selection examples.

Most helpful comment

The Issue

If you apply a filter to the table it snapshots the rows state, so when you would try to select or deselect the row it would only work once, so you couldn't select then deselect a row without changing the filters. It would throw it out as if you were trying to transition to the same state.

How to reproduce

  1. Open Kitchen-Sink Example
  2. Apply a filter to any column
  3. Try to select and then deselect the same row without changing the filter

My Solution

I was able to fix it locally, though I only fixed it for this situation and only tested for this situation.

So I changed the useRowSelect toggleRowSelected reducer so it would check the the rows that are selected in state to see if the id exists in the object.

My Solution

All 4 comments

The Issue

If you apply a filter to the table it snapshots the rows state, so when you would try to select or deselect the row it would only work once, so you couldn't select then deselect a row without changing the filters. It would throw it out as if you were trying to transition to the same state.

How to reproduce

  1. Open Kitchen-Sink Example
  2. Apply a filter to any column
  3. Try to select and then deselect the same row without changing the filter

My Solution

I was able to fix it locally, though I only fixed it for this situation and only tested for this situation.

So I changed the useRowSelect toggleRowSelected reducer so it would check the the rows that are selected in state to see if the id exists in the object.

My Solution

Will #1925 fix this?

No, that commit is to fix changing the state of only rows that are visible while a filter is applied using the toggleAll check. Currently it will deselect rows that are not visible. The tests that are in place only test using the toggleAll feature instead of the toggle individual rows. The problem that I proposed is interacting with a single column while a filter is applied.

This is now fixed to my knowledge with recent PRs

Was this page helpful?
0 / 5 - 0 ratings

Related issues

LeonHex picture LeonHex  路  3Comments

mellis481 picture mellis481  路  3Comments

krishna-shenll picture krishna-shenll  路  3Comments

dilipsundarraj1 picture dilipsundarraj1  路  3Comments

bdkersey picture bdkersey  路  3Comments