Checkbox "Select all" is selecting disabled rows also

[teja-centime]

Version : @inovua/[email protected]

What you did:

Enabled Checkbox column for selecting the rows and also my table has a scroll where it hides some rows inside the scroll at down below. There are some rows that have disable checkboxes and some of these rows are hidden in the scroll. As we know, due to the virtualization, the datagrid will not render those rows that are not in the viewport ( hidden inside scroll). Now, I click on "Select All".

What happened:
The disabled rows are also getting selected. Usually, I set my state containing the list of disabled rows by adding each disabled row into it whenever the renderCheckbox runs for that row. But, as virtualization is in the picture, this function is not getting called for the rows hidden inside the scroll. I dont want to remove the virtualization since my table can have large number of rows.

Reproduction repository:

https://codesandbox.io/p/sandbox/datagrid-selectall-disabled-rows-kk8qh3?file=%2Fsrc%2FApp.js%3A325%2C31

Problem Description:
If you check the above repository, the disabled rows are having full grey checkboxes. If you directly click the "Select All" button without scrolling down, the last rows like "Tim Cheap" etc are also getting selected. But, before you click on "Select All", if you scroll to bottom and then click, it won't happen. Basically, renderCheckbox method which is storing the disabled rows is not getting triggered due to virtualization.

Suggested solution:

How do we solve this ? Any hints are appreciated. Ideally in other libraries, we have a function for `unselected` which takes care of checking whether that row is disabled or not (regardless of rendering that row). But in this, it is plain object or boolean. 

[avishshah11]

I tried to reproduce the bug using the give sandbox link but seems it works fine when I clicked on select all checkbox it doesn't selects the disabled checkboxes. Above I have attached image for the same.

@teja-centime

[teja-centime]

@avishshah11 No, please check the disabled rows hidden in the scroll by going to the last row. Again reiterating the steps to reproduce :-

1. Close the link if you already opened it and open the same codesandbox link afresh
2. Click on "cross" button of the banner message that says "Unlicensed copy -... " to close it
3. Click on "Select All" checkbox in the header right away without scrolling anything in the table

Now you can see the disabled rows that are directly visible in the viewport are not selected but if you scroll down to the bottom, you will see the disabled rows got selected.

[avishshah11]

@teja-centime

Yes, disabled once are getting selected for initial time that too specifically last 3 rows but then when I uncheck the checkbox and check it again then the disabled ones (all of them) doesn't get selected.

[teja-centime]

@avishshah11 Yes, as I proposed, this is because of the virtualization. At first the rows below haven't rendered yet because of virtualization, that is why we are not able to glean the disabled state of those rows. But, after the library has rendered them because you scrolled into them, the state of "which rows are disabled" got updated and then it will start working normally.
I wanted to ask if there is any way the library can calculate the state of the row (whether it is disabled or not) at the point of "Select All" without rendering them ? If you guys provide a function for the "unselected" prop which calculates the state dynamically instead of passing a standard value, then this will be solved.

[avishshah11]

@teja-centime

Well am not an maintainer of this repo, just that I was looking this into integrating into while I got your issue which I was not able to reproduce at that time so thought of asking it to you.

[teja-centime]

@avishshah11 Are u able to check it now ? Can you do anything to rectify it or any solution with existing code ?

[avishshah11]

@teja-centime Well am using another data grid library. So, haven't worked on this since time you told about the issue.