[DataGrid] Fix lazy loading crash with isRowSelectable prop

[MBilalShafi]

Fixes #17608

Follow-up tasks:

• Add test coverage

[mui-bot]

Deploy preview: https://deploy-preview-17629--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against b783dd5

[philipburleigh]

When will this be approved?

[arminmeh]

The issue can also be fixed by using direct selectors to get the selection candidates

--- a/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
+++ b/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
@@ -40,11 +40,6 @@ const GridHeaderCheckbox = forwardRef<HTMLButtonElement, GridColumnHeaderParams>
     const classes = useUtilityClasses(ownerState);
     const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
     const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
-    const visibleRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
-    const paginatedVisibleRowIds = useGridSelector(
-      apiRef,
-      gridPaginatedVisibleSortedGridRowIdsSelector,
-    );

     const filteredSelection = React.useMemo(() => {
       const isRowSelectable = rootProps.isRowSelectable;
@@ -80,8 +75,8 @@ const GridHeaderCheckbox = forwardRef<HTMLButtonElement, GridColumnHeaderParams>
         !rootProps.pagination ||
         !rootProps.checkboxSelectionVisibleOnly ||
         rootProps.paginationMode === 'server'
-          ? visibleRowIds
-          : paginatedVisibleRowIds;
+          ? gridExpandedSortedRowIdsSelector(apiRef)
+          : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);

       // Convert to a Set to make O(1) checking if a row exists or not
       const candidates = new Set<GridRowId>();
@@ -97,8 +92,6 @@ const GridHeaderCheckbox = forwardRef<HTMLButtonElement, GridColumnHeaderParams>
       rootProps.pagination,
       rootProps.paginationMode,
       rootProps.checkboxSelectionVisibleOnly,
-      paginatedVisibleRowIds,
-      visibleRowIds,
     ]);

[MBilalShafi]

The issue can also be fixed by using direct selectors to get the selection candidates

--- a/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
+++ b/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
@@ -40,11 +40,6 @@ const GridHeaderCheckbox = forwardRef<HTMLButtonElement, GridColumnHeaderParams>
     const classes = useUtilityClasses(ownerState);
     const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
     const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
-    const visibleRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
-    const paginatedVisibleRowIds = useGridSelector(
-      apiRef,
-      gridPaginatedVisibleSortedGridRowIdsSelector,
-    );

     const filteredSelection = React.useMemo(() => {
       const isRowSelectable = rootProps.isRowSelectable;
@@ -80,8 +75,8 @@ const GridHeaderCheckbox = forwardRef<HTMLButtonElement, GridColumnHeaderParams>
         !rootProps.pagination ||
         !rootProps.checkboxSelectionVisibleOnly ||
         rootProps.paginationMode === 'server'
-          ? visibleRowIds
-          : paginatedVisibleRowIds;
+          ? gridExpandedSortedRowIdsSelector(apiRef)
+          : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);

       // Convert to a Set to make O(1) checking if a row exists or not
       const candidates = new Set<GridRowId>();
@@ -97,8 +92,6 @@ const GridHeaderCheckbox = forwardRef<HTMLButtonElement, GridColumnHeaderParams>
       rootProps.pagination,
       rootProps.paginationMode,
       rootProps.checkboxSelectionVisibleOnly,
-      paginatedVisibleRowIds,
-      visibleRowIds,
     ]);

I'd not do it, as it would disrupt the reactive behavior established through the store binding via useGridSelector. Consequently, selectionCandidates would not recompute unless one of the remaining dependencies changes, resulting in stale data.

[arminmeh]

I'd not do it, as it would disrupt the reactive behavior established through the store binding via useGridSelector.

Right. Ignore
I had an impression that this is inside the feature hook.
Component needs useGridSelector.