[data grid] Grouping Col Def with a flex and pinned columns causes "Maximum update depth exceeded"

[cstephens-cni]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/ecstatic-sid-4xygr9?file=%2Fsrc%2FDemo.tsx%3A47%2C1
Steps:

1. fails on load
2. remove flex from grouping column and it will load
3. can also remove pinned col to have it load

#12584 (comment) reported a similar issue. With different pinned columns

Current behavior

Error thrown

Expected behavior

grid to load and pinned grouped column to use flex

Context

Pinning a grouped column that can flex so we can use it as the defining col of that row.

Your environment

npx @mui/envinfo

 System:
    OS: macOS 14.4.1
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.60
    Edge: 124.0.2478.51
    Safari: 17.4.1
  npmPackages:
    @emotion/react: 11.11.3 => 11.11.3
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.15
    @mui/icons-material: ^5.15.15 => 5.15.15
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170
    @mui/material: ^5.15.15 => 5.15.15
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system: ^5.15.15 => 5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-charts: ^7.2.0 => 7.3.0
    @mui/x-data-grid:  7.3.0
    @mui/x-data-grid-premium: ^7.2.0 => 7.3.0
    @mui/x-data-grid-pro:  7.3.0
    @mui/x-date-pickers: ^7.2.0 => 7.2.0
    @mui/x-license:  7.2.0
    @types/react: 18.2.61 => 18.2.61
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.3.3 => 5.3.3

Chrome

Search keywords: grouping flex pinned Maximum update depth exceeded
Order ID: 70572

[beaktor]

Thanks for setting it up @cstephens-cni. I see the same error in my test environment, even when stripped down to a flat (non-grouping) table, 1 column, 1 row.

(I'm not able to fork your example to create the absolute simplest example, but hopefully my description should suffice.)

As a side note, this is gating our adoption of 7.x, as we're stuck on the latest 6.x until this is resolved. Thanks!

[michelengelen]

Hey @cstephens-cni and @beaktor ... I can confirm this bug.
On a side note: This is not happening when on initial load the grid is already in the "sticky-state" (the rows are overflowing the container. There is a different problem with that as well: The width is not calculated correctly.
cc @romgrk

[romgrk]

I can't reproduce with the codesandbox link above, page loads without error. Are you still observing the issue? If so, can you give more details?

[beaktor]

@romgrk I just clicked on the very first link above (live example) into an incognito window, and see the error:

Arguably, it's not the simplest repro scenario, with unnecessary multiple columns and column grouping. If you think it would help for an even simpler repro, I can try afresh. I was able to see column size problems with just the combination of 1) pinned column, and 2) flex: turned on for that pinned column.

[romgrk]

It's working for me.

Maybe it's a macOS issue, @MBilalShafi or @cherniavskii would one of you be able to reproduce? If so, could you take the issue?

[beaktor]

@romgrk I think the other key that can trigger it, is resizing the window in that configuration. Would you mind trying that? Thank you!

[beaktor]

@romgrk Any update if you were able to reproduce this, if you resized the window? If not, I'll try and create another sandbox from scratch to see if it's simpler.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.

[romgrk]

I can reproduce when resizing it up past a certain threshold. I'll add it to my task list.

[romgrk]

I've been trying to reproduce further and I haven't been able to reproduce it locally (outside codesandbox) and even in codesandbox, I very rarely hit the issue. Do you have any more details that could help me reproduce it? Can you consistently trigger it?

I also see that the CSB is at 7.3.0, please try with the latest version.

[beaktor]

Thanks for following up, @romgrk. I'm afk until next Monday, when I can try to see if I can strip down my setup to offer the simplest repro scenario. It happens almost 100% of the time in our app, dev tools open. Not sure the reason in discrepancy between what we're seeing, perhaps dynamic sizing with flexbox around the grid — but I'll revisit this next week and share more details.

[cherniavskii]

I cannot reproduce the issue with Data Grid 7.3.1 and above. I believe it was fixed by #12849

7.3.0: https://codesandbox.io/p/sandbox/black-silence-3p8p5z
7.3.2: https://codesandbox.io/p/sandbox/stupefied-wave-gn8lds

[cherniavskii]

Fixed by #12849

[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.

@cstephens-cni: 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.

[cstephens-cni]

Sorry I haven't been super involved in this. We have like 40 tasks going on and I only had a few days to try to upgrade. I'll swing back to this soon and see if it is resolved. Thanks all for the support.

[cstephens-cni]

This looks to be good now