Row selection callback called multiple times when using grouping

[josueuitzil]

material-react-table version

v2.13.1

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

The onRowSelectionChange gets called multiple times when clicking a grouped column to unselect all items. This might not be an issue when the state setter is passed directly to the table instance, however, it breaks implementations that might need to use or process the updated react state before setting it.

I took a look at the code and I think that it might be called by the getMRT_RowSelectionHandler util iterating through all the subrows to toggle their selection state. This might be causing multiple callback calls and a race condition.

Minimal, Reproducible Example - (Optional, but Recommended)

Codesandbox: https://codesandbox.io/p/devbox/row-selection-with-grouping-9rxklm?workspaceId=a99c66fb-3472-4189-a44e-72c9121d3c0a

This is a fork of the documentation example for grouping; minimal changes were done for adding selection handling.

To reproduce click on the Male group checkbox twice. The first click correctly selects all subrows, but the second click only unselects the last one. When you open the console you will see that the selection callback was called multiple times.

Screenshots or Videos (Optional)

Screen.Recording.2024-08-06.at.12.41.42.p.m.mp4

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.