[data grid] The loading does not disable user interaction

[sp-reach]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When a table component is loading the overlay doesn't block users interacting with the component.

It seems as though the zIndex should be set for this wrapper or the loadingOverlay should be applied to this wrapper instead.

https://user-images.githubusercontent.com/80424905/195852430-580b9068-26ea-4296-be4b-6ef56400de58.mp4

Expected behavior 🤔

When the loading state is rendered it should disable user interaction with the table, the styling is in place, but on the wrong element.

Video of expected behavior.

https://user-images.githubusercontent.com/80424905/195852940-9528e6bd-3cd7-40d0-a517-c48b536f2c27.mp4

Steps to reproduce 🕹

Link to live example: https://mui.com/x/react-data-grid/#commercial-version

Steps:

1. Top item open stackblitz demo
2. set loading={true} on DataGridPro
3. try overloading componentsProps => loadingOverlay => sx => zIndex
4. Correctly override the styling in CSS of the wrapper of the loadingOverlay.

Context 🔦

Interaction with a table that is loading, or is making a DB call after it has been re-ordered can cause problems. Instead of implementing extra styling or "hacky" ways of overriding pointer events implement it as intended.

/**
 * Custom styling is being applied to disable dragging
 *  "pointerEvents" because `loading` doesn't disable
 *   users from interacting with the table.
 */
let disabledStyling: SxProps = {};

if (orderMutation.isLoading) {
    disabledStyling = {
        ...disabledStyling,
        '& .MuiDataGrid-rowReorderCellContainer ': {
            pointerEvents: 'none',
            opacity: 0.5,
        },
    };
}
...
return <DataGridPro sx={disabledStyling} ... />

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Chrome, Edge Output from `npx @mui/envinfo` goes here. System: OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa) Binaries: Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.2/bin/yarn npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @emotion/react: ^11.9.3 => 11.10.0 @emotion/styled: ^11.9.3 => 11.10.0 @mui/icons-material: ^5.8.4 => 5.8.4 @mui/material: ^5.8.4 => 5.10.0 @mui/private-theming: 5.9.3 @mui/styled-engine: 5.10.0 @mui/system: 5.10.0 @mui/types: 7.2.0 @mui/utils: 5.10.6 @mui/x-data-grid: ^5.17.1 => 5.17.1 @mui/x-data-grid-pro: ^5.17.1 => 5.17.1 @mui/x-date-pickers: 5.0.3 @mui/x-date-pickers-pro: 5.0.3 @mui/x-license-pro: 5.17.0 @types/react: ^18.0.0 => 18.0.17 react: ^18.0.0 => 18.2.0 react-dom: ^18.0.0 => 18.2.0 typescript: ^4.6.3 => 4.7.4 ```

Order ID 💳 (optional)

No response

[m4theushw]

We can't block interaction in the overlay because it may contain interactive elements. In the past we did this and it caused a regression: #5590 My suggestion, for now, is to conditionally disable the pointer events in the grid with

<DataGrid
  sx={{
    pointerEvents: isLoading ? 'none' : 'unset',
  }}
/>

A better solution could be to add a CSS class, like .MuiDataGrid--loading, to the root element to make easier to do this customization.

cc @cherniavskii

[sp-reach]

@m4theushw Thanks for the work-around of using pointerEvents, but instead of adding a custom css class, or using css conditionally can an optional parameter be added to force this behavior?

If someone wants to keep the same behavior, no changes, however if a user wants to actually have the loading disable interaction a prop such as loadingPreventInteraction or something simpler could be applied to properly set the z-index as stated in the original post, or apply this work-around of using pointerEvents.

[cherniavskii]

It's fixed in v6 by https://github.com/mui/mui-x/pull/5808 Here's a demo: https://codesandbox.io/s/b5r1tz?file=/demo.tsx

The workaround for v5:

<DataGrid
  componentsProps={{
    loadingOverlay: {
      style: {
        pointerEvents: "unset"
      }
    }
  }}
/>

Here's a demo: https://codesandbox.io/s/intelligent-ptolemy-z04ic9?file=/demo.tsx

[sp-reach]

It is not fixed, you can still click the header with the "fix" you discuss above. Simply checking the header checkbox while "loading = true". Also all header buttons are enabled and work in both the v6 and v5 versions you proposed.

@cherniavskii

It's fixed in v6 by #5808 Here's a demo: https://codesandbox.io/s/b5r1tz?file=/demo.tsx

[cherniavskii]

you can still click the header with the "fix" you discuss above

Yes, overlay doesn't cover the header. This is expected (and it matches the "Video of expected behavior" provided in the issue description). The header is still fully interactive during loading and this is expected. Users might want to change sorting/filtering/etc while waiting for data to load. If you want to change that, then I agree with @m4theushw's suggestion in https://github.com/mui/mui-x/issues/6508#issuecomment-1279599988

[sp-reach]

@cherniavskii Thanks for explaining your thought process, but the original request would be to:

When the loading state is rendered it should disable user interaction with the table, the styling is in place, but on the wrong element.

To me that would include sorting, filtering, modifying any data in the table, including checkboxes.

I agree I will be following @m4theushw's suggestion above as a "quick fix" however it seems to be a larger problem.

pointerEvents: isLoading ? 'none' : 'unset',

[cherniavskii]

When the loading state is rendered it should disable user interaction with the table, the styling is in place, but on the wrong element.

To me that would include sorting, filtering, modifying any data in the table, including checkboxes.

That's the first time we get a request like this if I'm not mistaken. Let's wait for some upvotes to validate this with community.

[yanfaingoldCell]

just entered the same issue, thats obvious to have overlay to be over the table, its in the naming of overlay, for now i am looking for workaround but thats really a basic need of overlay.

[sp-reach]

@yanfaingoldCell Please read the other comments as fix has been implemented by @m4theushw above

this is an Ok work around, but if you want a BAD way see the stack blitz.

[yanfaingoldCell]

its not good enough due to me using a custom pagination as well so I am currently trying to pass isloading status into my custompagination component, but my point is this stuff is usually should be out of the box and not me trying to workaround stuff here

[cherniavskii]

@yanfaingoldCell The one-liner in https://github.com/mui/mui-x/issues/6508#issuecomment-1279599988 should cover the pagination as well. See this demo: https://stackblitz.com/edit/react-emnxd4-ybjrsa?file=demo.tsx