[data grid] checkboxSelectionVisibleOnly with server-side pagination doesn't select all items on the second page

[Londeren]

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-f1gyh1?file=Demo.tsx

<DataGridPro
  columns={columns}
  unstable_dataSource={dataSource}
  pagination
  initialState={initialStateWithPagination}
  pageSizeOptions={[10, 20, 50]}
  checkboxSelection
  checkboxSelectionVisibleOnly
/>

Steps:

1. Select all items by clicking on the main (Select All) checkbox in the header
2. Navigate to page 2 and click the same Select All checkbox

Current behavior

Only 1 item is selected on the second page.

Expected behavior

All items are selected on the second page.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: checkboxSelectionVisibleOnly, pagination, checkboxSelection
Order ID: 87418

[michelengelen]

Hey @Londeren
I did assign this to @MBilalShafi who is our mastermind regarding the server-side integration! 👍🏼

[MBilalShafi]

Thank you @Londeren for reporting. I can reproduce this with the data source variant that you posted as well as the regular server-side pagination.

The culprit is the gridPaginatedVisibleSortedGridRowIdsSelector as it doesn't provide the correct sliced values when checkboxSelectionVisibleOnly prop is passed on a server-side paginated Data Grid.

I'll push a fix soon.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Londeren: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.