[Datagrid] The Grid flickers as it continuously resizes itself

[Praetorss]

Issue can be triggered after getting the resolution just right for the condition to take place.
In result the grid can be seen extending and shrinking horizontally non stop. After inspection of the source we can see JavaScript realigning width and min-width on a number of DOM Elements.

Experienced on both 4.0.0-alpha.28 and 4.0.0-alpha.29 versions and possibly on others.
Sometimes difficult to replicate, other times happens all the time. To try to replicate make window smaller and resize until you get scrollbar to show. It will likely disappear shortly after resizing. Now change the zoom level in and out - at some point the issue will occur. If it does not resize the window to a different size and try the steps again.

Any help, suggestions are really appreciated.

Attached GIF demonstrating the issue.

[Praetorss]

@dtassone forgot to mention that this issue causes extreme CPU consumption and can lead to the whole browser tab freezing.

[Praetorss]

@dtassone are you aware of any steps that could be taken to mitigate this? Also, do you know if there is a version of data grid that might not suffer from this issue?

[oliviertassinari]

@Praetorss Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[Praetorss]

I have managed to resolve the issue and narrow down the cause.

Issue is caused by putting the data grid inside material grid when that has spacing attribute set on it. in my case I had spacing set to 2. Looking at how spacing is applied it recalculates the width by doing calc(100% + x number of pixels) which is taking the width over 100% width. That in turn causes the data grid to misbehave.

Looks to me like this is a valid issue for the data grid which will occur when container the grid is in is stretched out. it might not be a very common scenario to take place hence the low priority on this seems right to me.

Sorry, I don't have much time right now to put an example together on sandbox.

[oliviertassinari]

Ok, if you can reproduce, that would be great, I have tried something in https://codesandbox.io/s/material-demo-forked-lx9j6?file=/demo.tsx but couldn't. I will close next week if we don't manage to make progress on the reproduction part.

[Praetorss]

Aligned with my setup:
https://codesandbox.io/s/material-demo-forked-6cme3?file=/demo.tsx
Hard to reproduce. But managed to get flickering to occur for second ish and then it stopped.

If you cannot reproduce might be a very very niche thing that was happening to me.

[bzuu-ic]

I am experiencing the exact same issue as described above. Indeed it only happens at very specific conditions.

I can reproduce it with the following sample code:

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";

export default function BasicColumnsGrid() {
  return (
    <div style={{ height: "116px", width: "100%" }}>
      <DataGrid
        hideFooter
        // autoHeight
        columns={[
          { field: "username1", flex: 1 },
          { field: "username2", flex: 1 },
          { field: "username3", flex: 1 },
          { field: "username4", flex: 1 },
          { field: "username5", flex: 1 },
          { field: "username6", flex: 1 },
          { field: "username7", flex: 1 },
          { field: "age", width: 50 }
        ]}
        rows={[
          {
            id: 1,
            username1: "@MaterialUI",
            username2: "@MaterialUI",
            username3: "@MaterialUI",
            username4: "@MaterialUI",
            username5: "@MaterialUI",
            username6: "@MaterialUI",
            username7: "@MaterialUI",
            age: 20
          }
        ]}
      />
    </div>
  );
}

Available as a sandbox here:
https://codesandbox.io/s/basiccolumnsgrid-material-demo-forked-y26g5
The issue occurs when you have a screen size around 1732 pixels (and many others).

[bzuu-ic]

@oliviertassinari can you perhaps reopen this issue now that reproduction steps are available? Or would you prefer a new issue instead? Thanks!

[m4theushw]

I spent some time looking this bug, but I didn't find the root cause yet. The infinite loop seems starts here: https://github.com/mui-org/material-ui-x/blob/998b4024d2793b673baa9f410e8b4c08c6dd7811/packages/grid/_modules_/grid/hooks/features/container/useGridContainerProps.ts#L117

One hypothesis is, since flex columns are used, it's not supposed to have scrollbars. However, when this method gets called, hasScrollX evaluates to true, which changes the size of the viewport, and triggers the columns to resize to the new size. Then, once the columns are resized, columnsTotalWidth is now false, triggering a new resize, which starts the cycle again.

I can confirm that #2673 will not fix it.

[m4theushw]

@flaviendelangle #3007 should fix this.

[flaviendelangle]

The issue comes from rounding imprecision on flex columns.

For instance, here is an example with the following demo

I logged the computedWidth of each column and the total.

I said a few months back that non integer columns width could be risky and I think we have a perfect example here.

#2104 (comment)

To fix it, I can just round the column total width in the selector.

EDIT: Demo with my fix: https://codesandbox.io/s/basiccolumnsgrid-material-demo-forked-xyfkd

[flaviendelangle]

@bzuu-ic could you confirm me that on the codesandbox with the fix (in my previous message) you can't reproduce your bug ?

[bzuu-ic]

@flaviendelangle it seems the fix works. Great work 👍